当我们需要向整个页面应用样式时，通常会将类名添加到 <html> 元素上，这是一种普遍的做法。本文将介绍在不使用任何第三方库（特别是 jQuery）的情况下，如何通过纯 JavaScript 添加类名到 <html> 元素上。
在 JavaScript 中访问 <html> 元素
我们可以通过 document.documentElement 属性来访问 <html> 元素。这个属性返回文档树的根节点，即 <html> 元素。
const htmlElement = document.documentElement;
给 <html> 元素添加类名
要向 <html> 元素添加类名，我们可以使用 classList.add() 方法。该方法允许我们将一个或多个类名添加到元素的类列表中。
htmlElement.classList.add('my-class');这行代码将在 <html> 元素上添加一个名为 my-class 的新类。
如果您想同时添加多个类名，可以在 add() 方法中使用逗号分隔它们。
htmlElement.classList.add('class1', 'class2', 'class3');这行代码将在 <html> 元素中同时添加三个类名。
从 <html> 元素中删除类名
要从 <html> 元素中删除类名，我们可以使用 classList.remove() 方法。该方法允许我们从元素的类列表中删除一个或多个类名。
htmlElement.classList.remove('my-class');这行代码将从 <html> 元素中删除名为 my-class 的类。
如果您想同时删除多个类名，可以在 remove() 方法中使用逗号分隔它们。
htmlElement.classList.remove('class1', 'class2', 'class3');这行代码将从 <html> 元素中同时删除三个类名。
检查 <html> 元素是否具有某个类
要检查 <html> 元素是否具有某个类，我们可以使用 classList.contains() 方法。该方法返回一个布尔值，指示元素的类列表中是否存在指定的类名。
const hasClass = htmlElement.classList.contains('my-class');这行代码将检查 <html> 元素是否具有名为 my-class 的类，并将结果存储在 hasClass 变量中。
示例代码
下面是一个示例代码，演示如何使用纯 JavaScript 向 <html> 元素添加、删除和检查类名。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
-------
------
------- ------------------------ --------------
------- ------------------------------ --------------
------- ---------------------------- --------------
--------
----- ----------- - -------------------------
-------- ---------- -
--------------------------------------
-
-------- ------------- -
-----------------------------------------
-
-------- ------------ -
----- -------- - -------------------------------------------
---------- ------ ------- ---------- - ----- - ----- --- ------ --- ----- --------------
-
---------
-------
-------该示例包含三个按钮，分别用于添加、删除和检查 <html> 元素上的类名。点击每个按钮时，将调用相应的 JavaScript 函数。
总结
在本文中，我们学习了如何在纯 JavaScript 中向 <html> 元素添加、删除和检查类名。这些技术可以让我们在不使用任何第三方库的情况下，灵活地控制整个页面的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26125