currenStyle与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这种写法。
4、不要获取未设置的样式,否则不兼容。
因此为了在使用中更加方便,可以引入getStyle()方法,通过条件判断,选择使用getComputeStyle或者currentStyle方法。这样设置:
function getStyle( obj, attr ){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
getStyle(obj,attr)里面的参数第一个是对象或者是ID值或者是ID值的变量名,另一个是对象所对应的属性值 在写法上,不要有空格,否则会弹出undefined