javascript - 我怎样才能让点击一个按钮改变它的类名和我的 HTML 标签的类名？

Question

我有以下 HTML:

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

以及以下函数:

function setThemeColor(button) {
    localStorage.themeColor = // I need to set it here but I am not sure how
                              // if the class is Blue it needs to be Black
                              // if the class is Black it needs to be Blue
    document.getElementsByTagName('html')[0].className = // 
    // I need to change the button class 
}

我怎样才能做到这一点:

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

Answer 1

试试这个:

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/elses 来处理从一种颜色到另一种颜色的变化。