任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。这个style 对象是CSSStyleDeclaration 的实例，包含着通过HTML 的style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。在style 特性中指定的任何CSS 属性都将表现为这个style 对象的相应属性。对于使用短划线（分隔不同的词汇，例如background-image）的CSS 属性名，必须将其转换成驼峰大小写形式，才能通过JavaScript 来访问。下表列出了几个常见的CSS 属性及其在style 对象中对应的属性名。
多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中一个不能直接转换的CSS 属性就是float。由于float 是JavaScript 中的保留字，因此不能用作属性名。“DOM2 级样式”规范规定样式对象上相应的属性名应该是cssFloat；Firefox、Safari、Opera 和Chrome 都支持这个属性，而IE支持的则是styleFloat。
只要取得一个有效的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.width 设置为"20"，浏览器会假设它是"20px"；但在标准模式下，将style.width 设置为"20"会导致被忽略——因为没有度量单位。在实践中，最好始终都指定度量单位。
通过style 对象同样可以取得在style 特性中指定的样式。以下面的HTML 代码为例。
在style 特性中指定的样式信息可以通过下列代码取得。
alert(myDiv.style.backgroundColor); //"blue" alert(myDiv.style.width); //"10px" alert(myDiv.style.height); //"25px"
如果没有为元素设置style 特性，那么style 对象中可能会包含一些默认的值，但这些值并不能准确地反映该元素的样式信息。
1. DOM 样式属性和方法
“DOM2级样式”规范还为style 对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时，也可以修改样式。下面列出了这些属性和方法。
- cssText：如前所述，通过它能够访问到style 特性中的CSS 代码。
- length：应用给元素的CSS 属性的数量。
- parentRule：表示CSS 信息的CSSRule 对象。本节后面将讨论CSSRule 类型。
- getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue 对象。
- getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回"important"；否则，返回空字符串。
- getPropertyValue(propertyName)：返回给定属性的字符串值。
- item(index)：返回给定位置的CSS 属性的名称。
- removeProperty(propertyName)：从样式中删除给定属性。
- setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。
通过cssText 属性可以访问style 特性中的CSS代码。在读取模式下，cssText 返回浏览器对style特性中CSS 代码的内部表示。在写入模式下，赋给cssText 的值会重写整个style 特性的值；也就是说，以前通过style 特性指定的样式信息都将丢失。例如，如果通过style 特性为元素设置了边框，然后再以不包含边框的规则重写cssText，那么就会抹去元素上的边框。下面是使用cssText 属性的一个例子。
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; alert(myDiv.style.cssText);
设置cssText 是为元素应用多项变化最快捷的方式，因为可以一次性地应用所有变化。
设计length 属性的目的，就是将其与item()方法配套使用，以便迭代在元素中定义的CSS 属性。
在使用length 和item()时，style 对象实际上就相当于一个集合，都可以使用方括号语法来代替item()来取得给定位置的CSS 属性，如下面的例子所示。
for (var i=0, len=myDiv.style.length; i < len; i++){
alert(myDiv.style[i]); //或者myDiv.style.item(i)
}
无论是使用方括号语法还是使用item()方法，都可以取得CSS 属性名（"background-color"，不是"backgroundColor"）。然后，就可以在getPropertyValue()中使用取得的属性名进一步取得属性的值，如下所示。
var prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop);
alert(prop + " : " + value);
}
getPropertyValue()方法取得的始终都是CSS 属性值的字符串表示。如果你需要更多信息，可以使用getPropertyCSSValue()方法，它返回一个包含两个属性的CSSValue 对象，这两个属性分别是：cssText 和cssValueType。其中，cssText 属性的值与getPropertyValue()返回的值相同，而cssValueType 属性则是一个数值常量，表示值的类型：0 表示继承的值，1 表示基本的值，2 表示值列表，3 表示自定义的值。以下代码既输出CSS 属性值，也输出值的类型。
var prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; //或者myDiv.style.item(i)
value = myDiv.style.getPropertyCSSValue(prop);
alert(prop + " : " + value.cssText + " (" + value.cssValueType + ")");
}
运行一下
在实际开发中，getPropertyCSSValue()使用得比getPropertyValue()少得多。IE9+、Safarie3+以及Chrome 支持这个方法。Firefox 7 及之前版本也提供这个访问，但调用总返回null。
要从元素的样式中移除某个CSS 属性，需要使用removeProperty()方法。使用这个方法移除一个属性，意味着将会为该属性应用默认的样式（从其他样式表经层叠而来）。例如，要移除通过style特性设置的 border 属性，可以使用下面的代码。
myDiv.style.removeProperty("border");
在不确定某个给定的CSS 属性拥有什么默认值的情况下，就可以使用这个方法。只要移除相应的属性，就可以为元素应用默认值。
除非另有说明，本节讨论的属性和方法都得到了IE9+、Firefox、Safari、Opera 9+以及Chrome 的支持。
2. 计算的样式
虽然style 对象能够提供支持style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration 对象（与style 属性的类型相同），其中包含当前元素的所有计算的样式。
以下面这个HTML 页面为例。
Computed Styles Example
运行一下
应用给这个例子中