使用带有 OnChange 功能的标签选项选择外部 CSS答案

【问题标题】：Select external CSS using tag Option with OnChange function使用带有 OnChange 功能的标签选项选择外部 CSS
【发布时间】：2014-05-14 09:38:38
【问题描述】：

我的目标是使用下拉列表将网站更改为不同的外部 css，然后将其保存为 cookie，这就是我已经走了多远。我需要帮助来通过外部 js 文件中的 onchange 来解决它。我必须为此使用javascript。非常感谢您！

（抱歉编码不好）

HTML：

<head>

<link rel="stylesheet" type="text/css" href="style1.css" title="stil1" >
<link rel="stylesheet" type="text/css" href="style2.css" title="stil2" >
<link rel="stylesheet" type="text/css" href="style3.css" title="stil3" >
<link rel="stylesheet" type="text/css" href="style4.css" title="stil4" >

<pre>
<script type="text/javascript" src="test.js">

</script>

</pre>
</head>

<body>

    <select id="dropdown">
        <option value="1" >Utseende 1</option>
        <option value="2" >Utseende 2</option>
        <option value="3" >Utseende 3</option>
        <option value="4" >Utseende 4</option>
    </select>

</body>

外部 JS：

function createCookie(name,value,days){

   if (days){
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
   }
   else expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
   }


function readCookie(name){

    var nameEQ = name + "=";
    var ca = document.cookie.split(';');

    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }


function changeStyle(style){

    createCookie("style", style, 30);

    var links = document.getElementsByTagName("link");

    for(var i=0; i<4; i++){
    if(i == style){
    links[i].disabled = false;
    }
    else{
    links[i].disabled = true;
    }
    }
    }


var drop = document.getElementById("dropdown").getElementsByTagName("option");

    for(var i = 1; i < drop.length; i++){

    drop[i].onchange = function(){

    changeStyle(i-1);

    }

    }


function init(){

    var style = readCookie("style");

    if (style == null){
    style = 0;
    }
    changeStyle(style);
    }

【问题讨论】：

标签： javascript function select onchange option

【解决方案1】：

你可以这样做：

$("#dropdown").change(function() {
    $("link").attr("href", "style"+$(this).val()+".css");                      
});

DEMO HERE

【讨论】：