currentStyle和getComputedStyle

我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式

获取外部样式，需要使用currentStyle和getComputedStyle
currentStyle属性和getComputedStyle属性不能设置属性,只能获取

currentStyle:该属性只兼容IE,不兼容火狐和谷歌
写法:
ele.currentStyle["attr"] 或者
ele.currentStyle.attr;

getComputedStyle:该属性是兼容火狐谷歌,不兼容IE
写法:
window.getComputedStyle(ele,null)["attr"] 或者
window.getComputedStyle(ele,null).attr

var div=document.getElementsByTagName("div")[0];
if(div.currentStyle){
    //IE上兼容
    console.log(div.currentStyle["width"]);
}else{
     //火狐谷歌上兼容
    console.log(window.getComputedStyle(div,null)["width"]);
}

一个兼容性的方法

var div=document.getElementsByTagName("div")[0];
console.log(getStyle(div,"background-color"));
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

注意:在IE中获取到的颜色是16进制的,在火狐谷歌中获取的颜色是rgb模式的