在前端开发中，我们经常需要使用JavaScript动态更改页面的样式。本文将介绍如何通过JavaScript更改CSS类样式。
1. 使用Element.classList属性
Element.classList属性是一个只读属性，返回元素的类名集合，可以通过添加、删除、替换等方法修改类名。下面是一个示例代码：
-- -------------------- ---- ------- -- ---- ----- ------- - ------------------------------------- -- ---- --------------------------------- -- ---- ------------------------------------ -- ---- ------------------------------------- ------------
上述代码中，getElementById() 方法获取了一个元素，然后使用 classList 属性对该元素进行了修改。
2. 通过CSSStyleSheet对象更改样式
除了使用 classList，还可以通过CSSStyleSheet 对象修改样式。CSSStyleSheet 对象代表当前文档中的样式表，可以通过 document.styleSheets 属性来获取。以下是一个示例代码：
-- -------------------- ---- -------
-- -----
----- ---------- - ------------------------------------------- -- ----------------------------------
-- ------
----- -------- - ------------------- -- -----------------
-- ------
--- ------ ---- -- --------- -
-- ---------
-- ------------------ --- ----------- -
-- ----
---------------- - ------
-
-上述代码中，我们首先使用 Array.from() 方法将伪数组转换为真实数组，然后使用 find() 方法查找我们需要修改的样式表。接下来，我们使用 cssRules 或 rules 属性获取规则列表，并遍历每个规则。最后，我们找到目标类名并修改其样式。
3. 使用style属性
除了上述两种方法，还可以使用 style 属性来直接更改元素的内联样式。以下是一个示例代码：
// 获取元素
const element = document.getElementById("myElement");
// 直接修改样式
element.style.color = "red";
element.style.fontSize = "20px";上述代码中，我们首先使用 getElementById() 方法获取元素，然后直接通过 style 属性修改样式。
结论
本文介绍了三种常用的方式来通过JavaScript更改CSS类样式。具体选用哪种方式，取决于具体的需求和场景。无论采用哪种方式，都要注意代码的性能和可读性。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27202