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

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

jQuery：

HTML:

---

href=stylesheets/'+filename+'.css

---

应该可以工作，因为您开始使用一个'来进行追加，所以没有停止它

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

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

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

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

---

正如所指出的，您的连接有点错误。您还需要在JQuery中添加某种类型的事件，例如更改或单击。您的href路径中的相对路径可能有问题。根据现在的情况，样式表目录需要与HTML文件位于同一目录中

一种方法是为每个选择创建一个新的样式表链接，这可能会更好，因为这样在head中就没有遍历了

HTML:

JS:

---

不过，我相信整个方法存在一个大问题，一旦用户离开页面或刷新，除非您仅使用本地存储HTML5或cookie，否则您的链接将消失。不过在你的情况下可能还可以。如果可能的话，我强烈建议使用PHP，在这种情况下哪个IMO更易于管理。

$'head'。children:last.append；-是的，您的字符串连接不适合尝试动态添加CSS文件以更改类的颜色，相反，您应该为每种颜色创建一个类，并在单击按钮时更改元素的类。@ArunPJohny我花了一点时间来播放“找出差异：OP，看下面的引语used@ArunPJohny我理解那里的问题，但这在我的代码中仍然不起作用。我认为这个脚本没有用下拉菜单更新css样式表。知道为什么吗？文件名并没有定义工作起来像个符咒。。。在我选择这个作为最佳答案之前，我想知道有没有其他方法不声明id=colorchanger链接标记，就像我在问题中的方法一样？添加id可以让您从文档中删除以前的样式表。这增加了清理新样式表中可能未完全覆盖的任何样式的好处。我想你可以假设头上的最后一个链接标签是正确的，然后编辑它完美！非常感谢你！

<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>

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

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

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

$('#color').on('change', function (e) {
    var selected = $("option:selected", this);
    var color = this.value;
    $('head').append
     ('<link rel="stylesheet" href="stylesheets/' + color + '.css" />');
});