获取元素样式的一些方法

WEB页面中的每一个元素都有一个style对象来管理元素的CSS样式。Style对象包含每个与CSS样对应的特性。但格式有一点不一样。eg. Color -> style.color; background-color -> style.backgroundColor; 也就是说单个单词的CSS样式，JavaScript中的样式属性是一样的，两个单词的样式的表示方式是第一个单词加上首字母大写的第二个单词，如上面的例子。

用style对象可以获取有style特性的元素的CSS样式，但不能表示由CSS表示的样式或在style外部定义的类定义的CSS样式。eg. <style> .test{background-color:red;}</style><div id = “div1” class = “test”></div> document.getElementById(“div1”).style.backgroundColor 得到的值是空

因为CSS数据不是储存在style属性中，而是在类中。可以通过document.stylesheets样式表来访问。

最终样式：由所有内联样式和CSS规则计算的来的样式信息。通俗一点说就是元素最后是怎么样显示在屏幕上的。(最终样式都是只读的，不能赋值！)

IE中获取最终样式是通过currentStyle对象来获取的

eg. document.getElementById(“div1”).currentStyle.backgroundColor;

DOM中提供了一个getComputedStyle()方法来获取最终样式。可以从document.defaultView中访问这个方法。

转载于:https://www.cnblogs.com/ada313/archive/2010/03/19/1689563.html