Javascript 我怎样才能使它变成点击一个按钮就能改变它'；我的HTML标签的类名和类名？

我有以下HTML：

<button class="Blue" id="theme" onclick="setThemeColor(this)">#</button>

我怎样才能做到这一点：

• 如果button类是蓝色的，则单击它会将该类更改为黑色，html类名更改为蓝色
• 如果button类为黑色，则单击它会将该类更改为蓝色，html类名更改为黑色

试试这个：

var colors = ["Black", "Blue"];

function setThemeColor(button) {
    localStorage.themeColor = colors[(colors.indexOf(button.className) + 1) % colors.length];
    document.getElementsByTagName("html")[0].className = localStorage.themeColor;
    button.className = localStorage.themeColor; //by the way you shouldn't need this if you did this more effectively in CSS
}

然而，实际上你不需要把类放在按钮上，你应该为主题做的是像你正在做的那样在HTML标签上设置类，并且应用带有前缀的样式，因为css会层叠。例如：

 html.blue button { color: blue }

因此，代码将如下所示：

var colors = ["Black", "Blue"];

function setThemeColor(button) {
    var html = document.documentElement;
    var newColor = colors[(colors.indexOf(html.className) + 1) % colors.length];
    localStorage.themeColor = newColor;
    html.className = newColor; 
}

另外，使用我的代码（与其他代码不同），如果要添加颜色，只需将其添加到数组中即可。另一种方法是，你必须开始输入一组if/else来处理从一种颜色到另一种颜色的转换。

我建议：

function setThemeColor(button) {
    var newColor = button.className == "Blue" ? "Black" : "Blue";
    localStorage.themeColor = newColor;
    document.getElementsByTagName('html')[0].className = newColor;
}

function setThemeColor(button) {
    /* toggling between blue and black, means the className of the 'html'
       element should be whatever the button's className was: */
    document.getElementsByTagName('html')[0].className = button.className;

    // changing the class to 'black' if it was 'blue', and to 'blue' if it wasn't:
    button.className = button.className.indexOf('blue') === -1 ? 'blue' : 'black';

    // setting the localStorage:
    localStorage.themeColor = button.className.indexOf('blue') === -1 ? 'blue' : 'black';
}

---

.

您最好切换一个类并使用CSS级联来处理样式。您需要两个类是有原因的吗？我们的整个应用程序和许多CSS都是构建并运行的。颜色会根据它或我不确定如何使用按钮切换而变化。按钮参数不是已经指向html元素了吗？只需查看button.className，然后将其设置为正确的值。我非常喜欢您的答案，但我认为我确实需要localstorage，因为我想保留上一个主题颜色设置。对于这一点，我有if（localStorage.themeColor）{document.getElementsByTagName（'html'）[0].className=localStorage.themeColor；}是的，如果保留localStorage就可以了。我是说，你不需要让学生自己按按钮。

function setThemeColor(button) {
    /* toggling between blue and black, means the className of the 'html'
       element should be whatever the button's className was: */
    document.getElementsByTagName('html')[0].className = button.className;

    // changing the class to 'black' if it was 'blue', and to 'blue' if it wasn't:
    button.className = button.className.indexOf('blue') === -1 ? 'blue' : 'black';

    // setting the localStorage:
    localStorage.themeColor = button.className.indexOf('blue') === -1 ? 'blue' : 'black';
}