使用带有OnChange功能的Tag选项选择外部CSS

Question

我的目标是使用下拉列表将站点更改为其他外部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);
    }

Answer 1

您可以按照以下步骤进行操作：

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

此处演示

使用带有OnChange功能的Tag选项选择外部CSS

问题描述

1 个解决方案

解决方案1
0 2014-05-14 09:44:38

使用带有OnChange功能的Tag选项选择外部CSS

问题描述

1 个解决方案

解决方案1 0 2014-05-14 09:44:38

解决方案1
0 2014-05-14 09:44:38