使用Java将类添加到<html>？

87

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

javascript html

— 布兰登·列别杰夫（Brandon Lebedev）
source

这是我刚开始时提出的问题之一。我从来没有找到提到它的好地方。我很高兴在这里看到它。

— Pow-Ian

只是好奇-您为什么要这样做？

— David Hoerster

@David添加后备，以防Modernizr无法加载。加载时，Modernizr添加类“ js”。

— 布兰登·列别捷夫

1

如果您使用的是modernizr，则应该将“ no-js”类真正添加到标记中。（如果modernizr加载，它将删除该类）

— Kevin Boucher 2012年

@Kevin-已经做到了。转到HTML5样板！

— 布兰登·列别捷夫

109

像这样：

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

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

或将其用作您的“设置”行以保留任何先前应用的类：（感谢@ ama2）

root.className += ' myCssClass';

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

root.classList.add('myCssClass');

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

更新：

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

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//

— 凯文·布歇
source

仅供参考，classlist.add / .remove不适用于document.documentElement。

— 安迪·默瑟

@AndyMercer这是classList.add（骆驼壳）。

— 凯文·布歇

是的，显然这是一个错字。但是我所说的仍然是正确的。classList在document.documetElement上不起作用。

— 安迪·默瑟

在回复之前，我在三种不同的浏览器中进行了尝试，因此它并不是“显然是错字”。（Chrome，Firefox，Safariroot.classList.add('myCssClass')在这三个版本中都起作用。）您是否在使用IE？

— 凯文·布歇

document.documentElement.classList.add似乎在这里工作正常。2018年的浏览器是否开始支持此功能？

— 阿德里安

14

这也应该起作用：

document.documentElement.className = 'myClass';

兼容性。

编辑：

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

有效！？

歌剧作品：

我还可以确认它在以下方面有效：

铬26
Firefox 19.02
Safari 5.1.7

— c24w
source

您的示例具有看不见的字符，即U+200B最后一个撇号之后，导致它在webpack和其他编译器中编译失败！

— entozoon

@entozoon多么奇怪！感谢您指出了这一点。我已经修复它了：）

— c24w

11

我建议您看一下jQuery。

jQuery方式：

$("html").addClass("myClass");

— 艾伯索德
source

26

您不需要jQuery即可使用JavaScript选择元素。

— David Hoerster，2012年

1

jQuery实际上很容易学习，并且这些天大部分时间都在使用。但是，是的，您不需要此任务；）

— aebersold

1

是的，对，我们知道jquery是什么，但是用“ learn jquery”回答一个纯JavaScript问题令我惊讶的是:)

— povilasp 2012年

2

@aebersold我同意jQuery易于学习和使用，但是只需添加50K即可下载（加上一个额外的请求），只是添加一个类，这有点过分恕我直言。

— David Hoerster

jQuery之死！Vanilla JS获胜！

— Fresheyeball 2013年

9

document.documentElement.classList.add('myCssClass');

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

— 汤姆·埃斯特雷斯
source

7

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

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

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

— ama2
source

-2

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

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

nameclassorid开头没有点或＃

— 罗斯·包蒂斯塔（Roos Bautista）
source