JS中currentStyle和getComputedStyle

Posted 2020-08-12

一.在js中经常会获取元素的css样式，方法有很多种，这次只介绍currentStyle和getComputedStyle

　　1.obj.style这个方法只能获取在html中写的行间样式，内联样式不能获取，更别说外联样式了。

　　2.IE中使用的是obj.currentStyle方法，而firefox中使用的是getComputedStyle方法

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法，这个方法接受两个参数，要取得计算样式的元素和一个伪元素字符串（例如：":after"）。如锅不需要伪类元素信息，第二个参数可以设置成false。getComputedStyle()方法可以返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

　　边框属性可能不会返回样式表中的实际的border规则，是因为不同浏览器解释综合属性的方式不同，因为设置这种属性实际上会涉及很多其他的属性，getComputedStyle.border不会在所有浏览器中都有返回值，但是getComputedStyle.borderLeftWidth则会有返回值。有些返回值会不同，firefox和safari会将所有颜色装换成rgb格式，其他不明。

　　IE不支持这个属性，不过有个类似的属性为currentStyle属性，这个为属性，为style的属性，是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式。IE也不可以返回综合属性的值。

　　3.getComputedStyle()为方法，currentStyle为style属性。

1 function getStyle(obj,name) {
2   if(obj.currentStyle){
3   return obj.currentStyle[name]; 
4  }  
5   else{
6    return getComputedStyle(obj,false)[name]; 
7 }  
8 }