使用getComputedStyle方法获取元素CSS值

样式表有三种方式

内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。

外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

 

DOM标准里有个全局方法getComputedStyle,在ie中使用currentStyle。该方法获取的是最终应用在元素上的所有css属性对象。而element.style只能获取元素style中的CSS样式。

 

语法: 返回一个css样式声明对象,只读(只能获取样式,不能设置)。第二个参数可以省略。
var style = window.getComputedStyle("元素", "伪类");
 
使用方法如下:
function myCss(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, null)[attr];
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注