IE与DOM下访问内联样式和外部样式表的常用方法总结
学习了《javascript高级程序设计》里的DOM高级编程，在这里总结了一下关于IE与DOM下访问内联样式和外部样式表的常用方法
1IE下访问内联样式的方法和style的两个常用属性
2DOM下访问内联样式的常用方法.(firefox)
3IE与DOM访问外部样式的方法及常用属性
4最后举一个用javascript动态给元素批量增加style的小例子。
1ie下访问内联样式的方法和style的两个常用属性
1this.style.cssText
<div id="div1" style="background-color: red; height: 50px; width: 50px"
onclick="alert(this.style.cssText)"></div>
//outputs background-color: red; height: 50px; width: 50px
2每个元素都有一个currentStyle用以反映当前style属性。
oDiv.currentStyle.backgroundColor
至于ie访问内敛样式只需写Element.style.propertyValue
2DOM下访问内联样式的常用方法.(firefox)
通过Element.style访问如下方法。
1getPropertyValue(name) 返回样式值
2getPropertyPriority() 若指定important,则返回important,否则返回空。
3item(index) 返回给定的目标索引处的css属性名称
4removePropertyPriority(name) 移除指定样式。
5setProperty(propertyName,value,priority) 设置属性，最后一个为空/important
<head>
<title>Style Example</title>
<script type="text/javascript">
function useMethods() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.item(0)); //outputs "background-color"
alert(oDiv.style.getPropertyValue("background-color"));
oDiv.style.removeProperty("background-color");
}
</script>
</head>
<body>
<div id="div1" style="background-color: red; height: 50px; width: 50px" onmouseover="this.style.setProperty('background-color', 'blue', '')"
onmouseout="this.style.setProperty('background-color', 'red', '')"></div><br />
<input type="button" value="Use Methods" onclick="useMethods()" />
</body>
</html>
(提示：仅firefox下可以运行，IE不支持这些方法)
3IE与DOM访问外部样式的方法及常用属性
看个例子吧，里面针对IE和DOM的不同，及各个属性的使用我已经在注释里写明了。
<html> <head>
<style type="text/css">
div.special {
div.special 
background-color: red; height: 10px; width: 10px; margin: 10px;
}
</style> <script type="text/javascript"> function changeBackgroundColor() { var oDiv = document.getElementById("div1"); oDiv.style.backgroundColor = "blue"; var oRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//检测浏览器是哪个牌子的 alert(oRules[0].selectorText);//outputs DIV.special "selectorText"返回样式名称 //alert(oRules[0].cssText);//outputs undefine 属于内联样式属性 alert(oRules[0].style.backgroundColor);//outputs red alert(oDiv.style.backgroundColor); //blue 可以以数组形式访问alert(oDiv.style["backgroundColor"]); //因为style本身就是一个集合。 alert(oDiv.currentStyle.backgroundColor);//for IE //outputs blue //（currentStyle为所有样式作用计算得出的最终样式）实际是不存在的，所以也不能改变其值 //只能通过属性赋值改变。 //alert(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);//for dom 类比currentStyle } </script> </head> <body> <div id="div1" class="special"></div> <input type="button" value="Change Background Color" onclick="changeBackgroundColor()" /> </body></html>这里要注意的是在javascript里改变的样式，实际并没有改变样式表里的属性，相当于重写了外部属性
所以用oRules[0].style.backgroundColor访问样式表的时候，其值并没有改变改变的只是当前的外部样式的属性。oDiv.style.backgroundColor
4最后举一个用javascript动态给元素批量增加style的小例子。
