0

我有以下 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 来存储最后选择的颜色。一些建议将不胜感激？

4

3 回答 3

2

将 name 属性添加到按钮并使其成为您的 css 类名。

单线：

<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;
于 2013-10-06T09:22:18.063 回答
0

尝试

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

}
于 2013-10-06T09:22:31.343 回答
0

希望能帮助到你。

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>
于 2013-10-06T10:24:34.440 回答