JavaScript动态添加样式全攻略

想要使用JavaScript动态添加样式，让网页更具交互性吗？本文详解JavaScript动态修改CSS样式的四种实用方法，包括：**直接操作style属性**、**动态添加CSS类**、**动态创建style标签**以及**操作CSSStyleSheet API**。针对简单样式修改，可直接操作style属性；对于结构化样式，推荐使用预定义的CSS类并用classList增删改类名；若需全局注册新样式，则动态创建style标签插入head中。高级用法中，利用document.styleSheets API可精细操控现有样式表。文章深入剖析每种方法的优缺点及适用场景，助你选择最合适的方案，提升代码可维护性与性能。掌握这些技巧，轻松实现网页样式的动态更新，打造更丰富的用户体验！

答案：CSS中动态修改样式的常用方法包括直接操作style属性、添加CSS类、创建style标签和使用CSSStyleSheet API。①通过JavaScript设置元素的style属性可快速修改内联样式，适用于简单场景；②预先定义CSS类并用classList.add/toggle/remove方法控制类名，有利于样式与逻辑分离，推荐用于结构化样式；③动态创建style标签插入head中可全局注册新样式规则，适合需复用的动态样式；④利用document.styleSheets[0].insertRule可精细操控现有样式表，但受同源策略限制。应根据需求选择合适方式，优先考虑可维护性与性能。

在CSS中，我们通常通过JavaScript动态修改元素的样式或添加新的样式规则。以下是几种常用的方法来实现这一目标：

1. 直接操作元素的 style 属性

最直接的方式是通过 JavaScript 修改某个 DOM 元素的 style 属性。

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '18px';
element.style.padding = '10px';

这种方式适用于单个元素的内联样式设置，但不适合复杂或复用性高的样式。

2. 动态添加 CSS 类

更推荐的做法是预先在 CSS 中定义好类，然后通过 JavaScript 添加或移除类名。

.highlight {
  background-color: yellow;
  font-weight: bold;
}

const element = document.getElementById('myElement');
element.classList.add('highlight');

也可以使用 toggle 切换类，或 remove 删除类。

3. 动态创建并插入