Javascript 使用jQuery和下拉菜单的简单样式表切换器_Javascript_Jquery_Function_Stylesheet

Javascript 使用jQuery和下拉菜单的简单样式表切换器

javascript jquery function

Javascript 使用jQuery和下拉菜单的简单样式表切换器,javascript,jquery,function,stylesheet,Javascript,Jquery,Function,Stylesheet,目前，我有一个样式表切换器，它使用javascript根据下拉菜单中的选择加载新的样式表我想重新编写代码以使用jQuery而不是javascript。有人能帮我吗？我已经查看了jQuery解决方案，虽然有很多，但没有使用下拉菜单。这是我的代码： <head> <link href="colour/light.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> fun

目前，我有一个样式表切换器，它使用javascript根据下拉菜单中的选择加载新的样式表

我想重新编写代码以使用jQuery而不是javascript。有人能帮我吗？我已经查看了jQuery解决方案，虽然有很多，但没有使用下拉菜单。这是我的代码：

<head>

<link href="colour/light.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
function changeScheme()
{ var _head = document.getElementsByTagName('head')[0];
  var _link = document.createElement('link');
_link.type = 'text/css';
_link.href = colour.colour.options[colour.colour.selectedIndex].value;
_link.rel = 'stylesheet';
_head.appendChild(_link);
}
</script>

</head>
<body>

<form action="#" name="colour" id="colour" onsubmit="return false;">
              <select name="colour" onchange="changeScheme();">
                <option value="colour/light.css">Light scheme</option>
                <option value="colour/dark.css">Dark scheme</option>
              </select>
            </form>

</body>


函数转换方案（）
{var_head=document.getElementsByTagName（'head'）[0]；
var_link=document.createElement（'link'）；
_link.type='text/css'；
_link.href=color.color.options[color.color.selectedIndex].value；
_link.rel='stylesheet'；
_head.appendChild（_-link）；
}
灯光方案
黑暗计划

谢谢你的帮助


<head>

<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink">

<script type="text/javascript">
function changeScheme()
{ 
  $('#stylelink').attr('href',$('#colourselector').val());
}
</script>

</head>
<body>

    <form action="#" name="colour" id="colour" onsubmit="return false;">
          <select id="colourselector" name="colour" onchange="changeScheme();">
            <option value="colour/light.css">Light scheme</option>
            <option value="colour/dark.css">Dark scheme</option>
          </select>
    </form>
</body>

函数转换方案（）
{ 
$（'#stylelink'）.attr（'href'，$（'#colorselector'）.val（）；
}
灯光方案
黑暗计划

使您的解决方案100%jQuery（如建议的Stefan）


$（'#colorSelector'）.change（function（）{
$（'#stylelink'）.attr（'href'，$（this.val（））；
});
灯光方案
黑暗计划

谢谢，它看起来应该可以工作，但仍然不能。。。我不知道为什么…您可以在jQuery.change（）方法中定义处理程序，而不是使用HTML onChange属性调用函数：api.jQuery.com/change/

<head>
<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink">

<script type="text/javascript">
$('#colourselector').change(function(){ 
  $('#stylelink').attr('href',$(this).val());
});
</script>

</head>
<body>
    <form action="#" name="colour" id="colour" onsubmit="return false;">
          <select id="colourselector" name="colour">
            <option value="colour/light.css">Light scheme</option>
            <option value="colour/dark.css">Dark scheme</option>
          </select>
    </form>
</body>