如何才能使其单击按钮更改其类名和HTML标记的类名？

Question

I have the following HTML:

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

And the following function:

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 
}

How can I make it so:

• If the button class is Blue then clicking it changes the class to Black and the html classname changes to Blue
• If the button class is Black then clicking it changes the class to Blue and the html classname changes to Black

Answer 1

try this:

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
}

However really you don't need to put the class on the button what you should do for the theme is set the class on the HTML tag like you're doing, and apply styles using that has the prefix since css will cascade. EG:

 html.blue button { color: blue }

So then the code would just look like this:

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

Also, with my code (unlike the others) if you want to add a color you just add it to the array. The other way you have to start putting in a bunch of if/elses to handle going from one color to another.

Answer 2

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

Answer 3

I'd suggest:

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';
}

JS Fiddle demo .