如何使用 HTML 中的按钮来更改 <html> 元素的类名

How can I use buttons in my HTML to change the class name of the <html> element?

本文关键字：html 元素 HTML 何使用 按钮      更新时间：2023-09-26

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

<html class="darkBlue">

我想做的是能够使用我的 HTML（下图）中的三个按钮在"深蓝色"、"黑色"和"红色"之间切换类，并让我的应用程序记住用户下次访问页面时的最后一个设置。

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

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

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

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

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

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

还建议我可以使用本地存储来存储最后选择的颜色。一些建议将不胜感激？

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

尝试

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
}

希望对您有所帮助。

爪哇语 

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>
相关文章：