【JavaScript】访问元素样式及操作样式表

任何支持style特性得HTML元素在JavaScript中都有一个对应得style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。

只要取得一个有效的DOM元素的引用，就可以随时使用JavaScript为其设置样式。以下是几个例子：

var myDiv = document.getElementById("myDiv");

//设置背景颜色
myDiv.style.backgroundColor = "red";

//改变大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";

//指定边框
myDiv.style.border = "1px solid black";

在以这种方式改变样式时，元素的外观会自动被更新。

---

计算样式

虽然style对象能够提供支持style特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响当且元素的样式。

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。

getComputedStyle()方法返回一个CSSStyleDeclaration对象（与style属性的类型相同），其中包含当前元素的所有计算样式。

---

样式表

CSSStyleSheet类型表示样式表，包含通过<link>元素包含的样式表和在<style>元素中定义的样式表。应用于文档的所有样式表是通过document.styleSheets集合来表示的。通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或item（）方法可以访问每一个样式表。

CSSRule对象表示样式表中的每一条规则。实际上，CSSRule是一个供其他多种类型继承的基类类型，其中最常见的就是CSSStyleRule类型。该对象有一个style属性，是一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。