我有以下 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");
有人还建议我可以使用本地存储来存储最后选择的颜色。一些建议将不胜感激?
最佳答案
将 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;
关于javascript - 如何使用 HTML 中的按钮来更改 <html> 元素的类名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19207197/