如何使用原生JS在<body>标签上切换CSS类 - 无需JQuery

Question

4

能否将CSS类应用于HTML文档的<body>标签？

我目前尝试的方式是：

document.getElementsByClassName("body").add("cssClass");

希望能在特定时间对整个DOM应用过滤器，使页面变暗，但保留DOM本身的所有功能。

- physicsboy

7个回答

6

没有人谈论到存在一个名为 toggle 的属性。

document.body.classList.toggle("dark-mode");

- Yogesh Yadav

我希望这个能够工作，但是对我来说似乎并没有。 - Josh

1

document.getElementsByTagName("body")[0].className = 'yo';

.yo {
  background-color: #f90;
}

- Sébastien

1

这是一个使用ES6实现的示例：

。

document.querySelector('body');

这个 CodePen 示例展示了如何切换一个类：

- Kyle Sullivan

1

ES6与此有什么关系？ - Gabriele Petrioli

如果他们使用的浏览器可能与ES6不兼容，怎么办？ - Kyle Sullivan

好的，document.querySelector与ES6无关。ES6是JavaScript标准，与DOM Api无关。 - Gabriele Petrioli

1

欢迎来到 Stack Overflow @KyleSullivan，感谢您的帮助。 - Eoin

1

document.getElementsByTagName('body')[0].classList.add('your-class')

< p > getElementsByTagName() 返回一个节点列表，因此您需要访问第一个（也是唯一的）元素。

- Phix

1

你需要访问body的类列表 - 并且TagName返回一个节点列表

document.getElementsByTagName('body')[0].classList.add('cssClass')

- gavgrif

1

几乎所有情况下，您需要使用 document.getElementsByTagName() 并像这样使用：

document.getElementsByTagName('body')[0].classList.add('yourClass');

- Matheus Cuba

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sinisake · Accepted Answer

或者更简短地说：document.body.className = 'classname';

正如Gaby所建议的那样，为了避免替换已经应用的类（们）：

document.body.classList.add('classname')