用JS动态设置CSS样式常见方法小结(推荐)

在网页开发中，JavaScript (JS) 是一种强大的工具，可以动态地设置和调整 CSS 样式。下面，让我们一起几种常见的 JS 设置 CSS 样式的方法。这些方法既实用又易于学习，对于想要掌握动态样式设置的朋友来说，是极好的学习资源。

我们来谈谈最直接的方法之一：直接设置 style 属性。这种方法非常直观，例如：

```javascript

element.style.height = '100px';

```

不过需要注意的是，如果 CSS 属性名中包含连字符（-），则需要采用驼峰式命名法，如 `textAlign`。如果想保留连字符，可以使用中括号的形式，如 `element.style['text-align'] = '100px';`。

我们还可以使用 `setAttribute` 方法来设置属性，这种方法在某些情况下特别有用。例如：

```javascript

element.setAttribute('height', '100px');

```

另一种方法是设置 style 属性的整个字符串，包括多个样式定义：

```javascript

element.setAttribute('style', 'height: 100px !important');

```

如果要确保样式规则中的 `!important` 有效，可以使用 `setProperty` 方法，它允许我们为样式规则设置第三个参数：

```javascript

element.style.setProperty('height', '300px', 'important');

```

改变元素的 class 也是一种常见的方法。由于 JS 无法直接获取 CSS 的伪元素，我们可以通过改变伪元素父级的 class 来动态更改伪元素的样式：

```javascript

element.className = 'blue';

element.className += ' blue fb';

```

除了上述方法，还有 `cssText` 属性可以用来设置元素的样式规则字符串。我们还可以创建并引入新的 CSS 样式文件，或者在已有的样式表中使用 `addRule` 和 `insertRule` 方法添加新的样式规则。这些方法在动态调整页面样式时非常有用。例如：

```javascript

function addNewStyle(newStyle) {

var styleElement = document.getElementById('styles_js');

if (!styleElement) {

styleElement = document.createElement('style');

styleElement.type = 'text/css';

styleElement.id = 'styles_js';

document.getElementsByTagName('head')[0].appendChild(styleElement);

}

styleElement.appendChild(document.createTextNode(newStyle));

}

addNewStyle('.box {height: 100px !important;}');

```或者：

```javascript