內(nèi)置函數(shù)getComputedStyle()

在JS中,我們經(jīng)常會對DOM元素對象進(jìn)行樣式的操作，那么我們又該如何進(jìn)行讀、取呢？首先，我們可以通過js內(nèi)置的函數(shù)getComputedStyle()來獲取到計(jì)算后元素的樣式的一個對象，通過樣式屬性取到我們想要的屬性值

var oDiv = document.getElementsByTagName('div')[0];
var oStyle=getComputedStyle(oDiv)//這是一個對象
var oWidth=oStyle.width//獲取到元素寬的值

*注：getComputedStyle()得到的樣式對象，只能讀，不能寫
但是，getComputedStyle()只適用于標(biāo)準(zhǔn)下的瀏覽器，對于IE9版本以下的IE瀏覽器是不支持的，那么，在IE中我們又該如何來獲取元素的樣式呢？同樣，IE雖然有自己的一套規(guī)則，但還是會為我們對元素進(jìn)行操作提供規(guī)則的，我們可以使用currentStyle來獲取ie下元素樣式

var oDiv = document.getElementById('div');//在IE中通過className獲取元素是不行的
var oWidth=oDiv.currentStyle.width.//在IE中打開，獲取到元素寬的值

然而currentStyle又不能在其他瀏覽器中使用，所以，我們?yōu)榱朔奖闱夷芙鉀Q這一兼容問題，可以將這兩種方法編寫成一個getStyle()函數(shù)，這樣，在不同的瀏覽器打開也就不會出現(xiàn)問題了

var oDiv = document.getElementById('div');
function getStyle(obj, attr){
    //兼容性的時候， 判斷瀏覽器是否支持這個方法或?qū)傩裕?可以直接判斷
    if( obj.currentStyle ){
        return obj.currentStyle[attr];
    }
    else{
        var style = getComputedStyle(obj);
        return style[attr];
    }
}
console.log ( getStyle(oDiv,width) )