JS读写CSS样式的方法汇总

本文将为您详细介绍JS读写CSS样式的方法，内容详尽且具有参考价值。如果您对如何操作HTML元素的CSS样式感兴趣，那么这篇文章一定会给您带来不少收获。

一、通过DOM节点对象的style对象读写样式

您可以使用JavaScript获取HTML元素，并通过其style对象来直接读写CSS样式。例如：

```javascript

var elm = document.getElementById('test');

elm.style.color = 'black';

```

二、通过Element对象的属性直接读写style属性

除了通过style对象，您还可以使用Element对象的getAttribute、setAttribute和removeAttribute方法直接读写style属性。例如：

```javascript

elm.setAttribute('style','color:red;line-height:30px');

```

三、通过CSSStyleDeclaration对象读写样式

每一条CSS规则的样式声明部分都是一个CSSStyleDeclaration对象，它拥有许多属性和方法，可以用于详细读写样式。例如：

```javascript

elm.style.cssText ='color:red;line-height:30px;';

elm.style.removeProperty('color');

elm.style.setProperty('color', 'green', 'important');

```

四、利用document.styleSheets属性操作样式表

除了操作单个元素的样式，您还可以利用document.styleSheets属性来操作整个页面的所有样式表。这个属性返回一个类数组对象，包含页面中的所有样式表。您可以操作这些样式表的属性，如cssRules、disabled、ownerNode等。例如：

```javascript

var stylesheet = document.styleSheets[0]; // 获取第一个样式表

console.log(stylesheet.cssRules); // 输出样式表中的规则列表

```

以上就是JS读写CSS样式的主要方法。希望这篇文章能帮助您更好地理解和操作HTML元素的CSS样式。如果您在实践过程中遇到任何问题，欢迎随时向我提问。一、关于内嵌的style节点，当某个属性为null时，表示该属性没有特定的值。对于样式表的media属性，它决定了样式表的应用场景，可以是屏幕（screen）、打印（print）或两者都适用（all）。这个属性是只读的，默认值为screen。

例如：

```javascript

document.styleSheets[0].deleteRule(0); // 删除第一条样式规则

```

我们可以通过cssRules属性访问样式表中的规则，并使用selectorText获取选择器的字符串，使用cssText获取规则的字符串（含选择器）。

三、通过window对象的getComputedStyle方法，我们可以获取元素的实际样式。这个方法接收两个参数：第一个参数是Element对象，第二个参数可以是null、空字符串或伪元素字符串。返回的是一个表示计算样式的CSSStyleDeclaration对象，它代表了指定元素上的最终样式信息。

例如：

```javascript

var color = window.getComputedStyle(elm, ':before').color; // 获取:before伪元素的color属性

```

计算样式的CSSStyleDeclaration对象与表示内联样式的CSSStyleDeclaration对象的主要区别如下：

1. 计算样式的属性是只读的。

2. 计算样式的值是绝对的，单位会转换为像素（px）。

3. 不计算复合属性，只基于基础属性。

4. 计算样式对象没有cssText属性。

5. 计算样式在某些属性上的返回值可能不精确，具有欺骗性。

6. IE9以下版本不支持getComputedStyle方法，可使用IE的Element对象的currentStyle属性替代。

四、直接添加样式表可以通过两种方式实现：

1. 创建