javascript - 使用不同的 css 文件更改类的颜色

Question

我试图让我的游戏中的一个类改变颜色，所以我为每种颜色使用了不同的 css 文件。样式表位于名为 stylesheets 的文件夹中。我使用下面的脚本使其变得简单和简短，并且可用于所有颜色，但颜色不会改变。我相信问题出在 href 链接上。我的脚本有问题吗？

jQuery:

<script type="text/javascript">
function updateColor(filename) {
        $('head').children(":last").append('<link rel="stylesheet" href="stylesheets/" + filename + ".css" />');
}
</script>

HTML:

<select>
  <option href="javascript:updateColor('blue')">Blue</option>
  <option href="javascript:updateColor('black')">Black</option>
  <option href="javascript:updateColor('gray')">Gray</option>
  <option href="javascript:updateColor('green')">Green(Default)</option>
  <option href="javascript:updateColor('pink')">Pink</option>
  <option href="javascript:updateColor('yellow')">Yellow</option>
</select>

Answer 1

最简单的方法是在头部输出一个链接标记，其中包含您的默认样式表。从您的示例来看，它看起来是绿色的。

<link rel="stylesheet" id="color-changer" href="stylesheets/green.css">

然后将您的选择更改为:

<select>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
  <option value="gray">Gray</option>
  <option value="green" selected>Green(Default)</option>
  <option value="pink">Pink</option>
  <option value="yellow">Yellow</option>
</select>

那么你的js就变成了:

$(function(){
    $('select').change(function() {
        $('#color-changer').attr('href','stylesheets/' + $(this).val() + '.css') ;
    });
});

如果您想坚持使用附加新样式表的方法，您可以使用以下 js:

$(function(){
    $('select').change(function() {
        $('head').append('<link rel="stylesheet" href="stylesheets/' + $(this).val() + '.css" />') ;
    });
});