在前端开发中，设置元素的样式是很常见的操作。直接使用CSS样式表可以快速地实现这一目的。但有时候我们需要根据用户的交互或者其他动态事件来修改元素的样式。这时就需要使用JavaScript来完成这个任务了。
下面汇总了JS设置CSS样式的几种方式，并提供了一些示例代码和解释。
1. 使用style属性
在JavaScript中，可以使用元素的style属性来设置它的样式。这个属性返回一个CSSStyleDeclaration对象，包含了该元素所有的样式信息。可以通过该对象的属性来获取或者修改元素的样式。
-- ------- ----- ------- - -------------------------------------- ------------------------------------------- -- ------- ------------------- - ------
需要注意的是，style属性只能获取或者设置内嵌样式（inline style），而不能获取或者设置外部样式表（external stylesheet）中定义的样式。此外，也不能通过该属性获取元素继承的样式。
2. 使用classList属性
如果要为一个元素添加或者删除类（class），可以使用元素的classList属性。这个属性返回一个DOMTokenList对象，包含了该元素的所有类名。
-- ---- ----- ------- - -------------------------------------- ---------------------------------- -- ---- ------------------------------------- -- -------- -- ---------------------------------------- - -- -- --------- -
3. 使用setAttribute方法
使用元素的setAttribute方法可以设置任何属性，包括样式属性。这个方法接受两个参数：属性名和属性值。
----- ------- - -------------------------------------- ----------------------------- ------- ---- ----------------- ----------
需要注意的是，这种方式会直接覆盖原有的样式属性。因此，如果只想修改某个样式属性，最好还是使用style属性或者其他方法。
4. 使用className属性
在早期版本的JavaScript中，设置元素的类名是通过修改元素的className属性来实现的。这个属性包含了一个字符串，其中每个类名之间用空格分隔。
----- ------- - -------------------------------------- ----------------- - -----------
不过由于className属性可能会影响到元素的其他属性，因此现在不太推荐使用这种方式来设置元素的类名。建议使用classList属性来代替。
总结：
以上就是JS设置CSS样式的几种方式，每种方式都有自己的优缺点。需要根据具体情况进行选择。在实际开发中，推荐使用style属性和classList属性，它们更加灵活且易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/915