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

标签 javascript

我有以下 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/

相关文章:

javascript - Angular 2 图表 - 改变点半径

javascript - 重定向 Url 不工作并得到 No 'Access-Control-Allow-Origin' header Error

javascript - 所以我想创建一个基于浏览器的地球和其他绕太阳运行的行星的交互式实时动画......我从哪里开始?

javascript - 如何将2个数组复制到1个数组中?

javascript - 动态禁用 SVG 元素的触摸操作(过度滚动)

javascript - 如何在 Javascript 中合并两个字典?

javascript - HTML 页面部分的小 map 在视口(viewport)中显示为固定 anchor

javascript - 使用 CSS3 和 Jquery 以带有进度条的多步骤形式发出问题

javascript - 无法在 Visual Studio 2013 中禁用 Javascript 调试?

javascript - jQuery:获取 JSON 请求响应并将其显示在当前 html 页面下