Question

我有以下HTML，我的浏览器是IE9及以上版本，我们不使用jQuery：

<html class="darkBlue">

我想要做的是能够使用我的HTML（下面）中的三个按钮在“darkBlue”，“black”和“red”之间切换类，让我的应用程序记住最后一次设置用户下次访问该页面。

我在HTML中设置了以下内容：

<button>Blue</button>
<button>Black</button>
<button>Red</button>

如何轻松切换？我在想两件事：

我可以在点击事件中调用一个非常小的脚本。
在按钮的点击事件中编码所有内容？

到目前为止我学到的是我需要像这样选择<html>：

var elem = document.querySelector("html");

我还建议我可以使用localstorage来存储最后的颜色选择。一些建议会受到高度赞赏吗？

Answer 1

为按钮添加name属性并将其设为css classname。

单行：

<button name="className1" 
        onclick="document.getElementsByTagName('html')[0].className=this.name;"
        >Blue</button>

//other buttons

有一个功能：

function changeColour(cName){
    var elem = document.getElementsByTagName('html')[0];
    elem.className = cName;
}

<button name="className1" onclick="changeColour(this.name)">Blue</button>
<button name="className2" onclick="changeColour(this.name)">Black</button>
<button name="className3" onclick="changeColour(this.name)">Red</button>

或者，您可以使用：

var elem = document.documentElement;

Answer 2

尝试

var elem = document.querySelector("html");
[].forEach.call( document.querySelectorAll('button'), function(el) {
   el.addEventListener('click', changeColor);
});
function changeColor(event) {
    //console.log( this.innerHTML);
    if( this.innerHTML === 'Blue' ) {
        elem.setAttribute( "class", "blueClass" );
    }
    else if( this.innerHTML === 'Red' ) {
        elem.setAttribute( "class", "redClass" );
    }
    //Some things

}

Answer 3

希望它有所帮助。

<强>的Javascript

window.onload = function(){
    var theme = localStorage.getItem("theme");
    if(theme){
       document.getElementsByTagName("html")[0].className = theme ;
    }
}
    function setClass(){
        var html = document.getElementsByTagName("html")[0];
        document.getElementsByTagName("html")[0].className = this.name;
        localStorage.setItem("theme",this.name);
    };

即使您最好使用querySelector而不是getElementsBytagName。

<强> HTML

<button name="dark" onclick="setClass()">Dark</button>
<button name="light" onclick="setClass()">Light</button>

如何在HTML中使用按钮来更改元素的类名？

3 个答案: