getComputStyle的理解

getComputStyle的应用

在js中，如果想获取到元素的属性值，我们一般用document.getElementById(‘element’).style.xxx方法，就可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就得不到我们要的信息了。因此我们使用DOM标准里的全局方法getComputedStyle。比如getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。使用这个方法不仅能获得属性的属性值，还能获得属性的单位。 注意点：

1、获得的属性值是计算机（浏览器）计算后的样式

也就是说，如果一个元素有内联样式，外部样式，在JS中又修改了其属性值，那么获取到的值是经过计算后的样式。涉及到属性的权重值问题。

2、获取颜色值有特殊写法

如果想获取元素的颜色值，单纯的使用getComputedStyle(obj,null).backgroud，是获取不到的，因为background是一个复合样式，复合样式是不能获取到的。如果要获取颜色值，应该写成background-color。不同的浏览器返回的值都不一样。返回的是16进制的’#ffffff’，而FF返回的是rgb(255,255,255)

3、getComputedStyle在IE8下是不支持的，有兼容性问题。如果想要在IE8下也运行成功，那么用currentStyle.width这种写法。

封装一个getstyle方法

function getStyle( obj, attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}

getStyle(obj,attr)里面的参数第一个是对象或者是ID值或者是ID值的变量名，另一个是对象所对应的属性值 在写法上，不要有空格，否则会弹出undefined