DOM 2级样式规范为style对象定义了一些属性和方法，简单说明如下：
- cssText：返回style的CSS样式字符串。
- length：返回style的声明CSS样式的数量。
- parentRule：返回style所属的CSSRule对象。
- getPropertyCSSValue()：返回包含指定属性的CSSValue对象。
- getPropertyPriority()：返回包含指定属性是否附加了!important命令。
- item()：返回指定下标位置的CSS属性的名称。
- getPropertyValue()：返回指定属性的字符串值。
- removeProperty()：从样式中删除给定属性。
- setProperty()：为指定属性设置值，也可以附加优先权标志。
下面重点几个常用方法。
getPropertyValue()方法
getPropertyValue()能够获取指定元素样式属性的值。用法如下：
var value = e.style.getPropertyValue(propertyName)
参数propertyName表示CSS属性名，不是CSS脚本属性名，复合名应使用连字符进行连接。
【示例1】下面代码使用getPropertyValue()方法获取行内样式中width属性值，然后输出到盒子内显示。
<script>
window.onload = function(){
var box = document.getElementById("box"); //获取<div id="box">
var width = box.style.getPropertyValue("width"); //读取div元素的width属性值
box.innerHTML = "盒子宽度：" + width; //输出显示width值
}
</script>
<div id="box" style="width:300px; height:200px;border:solid 1px red" >盒子</div>
setProperty()方法
setProperty()方法为指定元素设置样式。具体用法如下：
e.style.setProperty(propertyName, value, priority)
参数说明如下：
- propertyName：设置CSS属性名。
- value ：设置CSS属性值，包含属性值的单位。
- priority：表示是否设置!important优先级命令，如果不设置可以以空字符串表示。
【示例2】在下面示例中使用setProperty()方法定义盒子的显示宽度和高度分别为400像素和200像素。
<script>
window.onload = function(){
var box = document.getElementById("box"); //获取<div id="box">
box.style.setProperty("width","400px",""); //定义盒子宽度为400像素
box.style.setProperty("height","200px",""); //定义盒子宽度为200像素
}
</script>
<div id="box" style="border:solid 1px red" >盒子</div>
removeProperty()方法
removeProperty()方法可以移出指定CSS属性的样式声明。具体用法如下：
e.style. removeProperty (propertyName)
item()方法
item()方法返回style对象中指定索引位置的CSS属性名称。具体用法如下：
var name = e.style.item(index)
参数index表示CSS样式的索引号。
getPropertyPriority(方法
getPropertyPriority()方法可以获取指定CSS属性中是否附加了!important优先级命令，如果存在则返回“important”字符串，否则返回空字符串。
【示例3】在下面示例中，定义鼠标移过盒子时，设置盒子的背景色为蓝色，而边框颜色为红色，当移出盒子时，又恢复到盒子默认设置的样式；而单击盒子时则在盒子内输出动态信息，显示当前盒子的宽度和高度。
<script>
window.onload = function(){
var box = document.getElementById("box"); //获取盒子的引用
box.onmouseover = function(){ //定义鼠标经过时的事件处理函数
box.style.setProperty("background-color", "blue", "");//设置背景色为蓝色
box.style.setProperty("border", "solid 50px red", ""); //设置边为50像素红色实线
}
box.onclick = function(){ //定义鼠标单击事件处理函数
box .innerHTML = (box.style.item(0) + ":" + box.style.getPropertyValue("width"));
//显示盒子的宽度
box .innerHTML = box .innerHTML + "<br>" + (box.style.item(1) + ":" + box.style.getPropertyValue("height")); //显示盒子的高度
}
box.onmouseout = function(){ //定义鼠标移出时的事件处理函数
box.style.setProperty("background-color", "red", ""); //设置背景色为红色
box.style.setProperty("border", "solid 50px blue", "");//设置边框为50像素的蓝色实线
}
}
</script>
<div id="box" style="width:100px; height:100px; background-color:red; border:solid 50px blue;"></div>
【示例4】针对示例3，可以使用点语法快速设计相同的交互效果，这样能够兼容IE早期版本，JavaScript代码如下所示。
<script>
window.onload = function(){
var box = document.getElementById("box"); //获取盒子的引用
box.onmouseover = function(){
box.style.backgroundColor = "blue"; //设置背景样式
box.style.border = "solid 50px red"; //设置边框样式
}
box.onclick = function(){ //读取并输出行内样式
box .innerHTML = "width:" + box.style.width;
box .innerHTML = box .innerHTML + "<br>" + "height:" + box.style.height;
}
box.onmouseout = function(){ //设计移出之后，恢复默认样式
box.style.backgroundColor = "red";
box.style.border = "solid 50px blue";
}
}
</script>