【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

对象，可以通过它设置和取得规则中特定的样式值。