108

如何<html>使用 Javascript 将类添加到根元素？

4

7 回答 7

140

像这样：

var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

root.setAttribute( 'class', 'myCssClass' );

或者使用它作为你的'setter'行来保留任何以前应用的类：（感谢@ama2）

root.className += ' myCssClass';

或者，根据所需的浏览器支持，您可以使用以下classList.add()方法：

root.classList.add('myCssClass');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList http://caniuse.com/#feat=classlist

更新：

引用元素的更优雅的解决方案HTML可能是：

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//
于 2012-12-20T21:45:09.997 回答
17

这也应该有效：

document.documentElement.className = 'myClass';

兼容性。

编辑：

IE 10 认为它是只读的；然而：

有效！？

歌剧作品：

作品

我还可以确认它适用于：

  • 铬 26
  • 火狐 19.02
  • Safari 5.1.7
于 2012-12-20T21:47:38.287 回答
15 
document.documentElement.classList.add('myCssClass');

classList从 ie10 开始支持：https ://caniuse.com/#search=classlist

于 2017-10-27T17:18:01.273 回答
10

我建议您看一下jQuery。

jQuery方式：

$("html").addClass("myClass");
于 2012-12-20T21:45:09.093 回答
7

您应该附加类而不是覆盖它

var headCSS = document.getElementsByTagName("html")[0].getAttribute("class") || "";
document.getElementsByTagName("html")[0].setAttribute("class",headCSS +"foo");

我仍然建议使用 jQuery 来避免浏览器不兼容

于 2012-12-20T21:46:52.347 回答
1 
document.getElementsByTagName("html")[0].classList.add('theme-dark');
document.getElementsByTagName("html")[0].classList.remove('theme-dark')
document.getElementsByTagName("html")[0].classList.toggle('theme-dark')
于 2021-01-18T22:06:49.727 回答
-3

使用 Jquery ...您可以将类添加到 html 元素，如下所示：

$(".divclass").find("p,h1,h2,h3,figure,span,a").addClass('nameclassorid');

nameclassorid没有点或#开头

于 2017-03-27T22:43:10.090 回答