一、獲取非行間樣式（標(biāo)準(zhǔn)瀏覽器）

說(shuō)到獲取樣式，可能我們會(huì)首先想到element.style.attribute，但是這種方式只能獲取行間樣式，非行間樣式是獲取不到的：

        div{
            width:100px;
            height:100px;
            background: pink;
        }

div

我們嘗試使用element.style.attribute獲取，但是無(wú)法獲取到內(nèi)部樣式或者外部樣式：

        var div = document.getElementsByTagName("div")[0];
        alert(div.style.width);

運(yùn)行結(jié)果：無(wú)法獲取

如果想要獲取非行間樣式，我們需要用到一個(gè)方法：
window.getComputedStyle(element).attribute （window可以省略掉）

        var div = document.getElementsByTagName("div")[0];
        alert(getComputedStyle(div).width);

獲取成功

二、ie兼容問(wèn)題

上面的方法在ie低版本是不兼容的（本人使用ie8測(cè)試），如果想在低版本ie獲取非行間樣式，我們需要使用ie里面專有的一個(gè)方法：element.currentStyle.attribute

        var div = document.getElementsByTagName("div")[0];
        alert(div.currentStyle.width);

獲取成功

三、封裝函數(shù)

標(biāo)準(zhǔn)瀏覽器和低版本ie瀏覽器互相是不認(rèn)識(shí)對(duì)方的方法的，為了同時(shí)兼容，我們可以嘗試獲取其中一種，如果成功，就直接獲取并且返回，失敗就使用另一種方式獲?。?/p>

        function getStyle(ele,attr){// 元素，屬性名
            if(ele.currentStyle) return ele.currentStyle[attr];
            else return getComputedStyle(ele)[attr];
            //當(dāng)attr為字符串時(shí)，使用中括號(hào)獲取
        }

調(diào)用：

        alert(getStyle(div,"width")); //注意第二個(gè)參數(shù)是屬性名的字符串

可以在兩種瀏覽器內(nèi)都正常運(yùn)行

四、注意事項(xiàng)

1、window.getComputedStyle和element.currentStyle方法都只能獲取樣式，不能設(shè)置樣式。

2、凡是js中需要獲取的樣式，在css中一般情況下一定要設(shè)置好相關(guān)的樣式，比如說(shuō)假設(shè)body的寬度是1200px，剛剛的div如果不設(shè)寬，默認(rèn)會(huì)占一整行，也就是同樣為1200px。
這時(shí)候，如果我們?cè)跇?biāo)準(zhǔn)瀏覽器中使用getComputedStyle獲取，可以正常獲取到1200px，而在ie中使用currentStyle獲取，獲取到的會(huì)是auto，如果在后面的代碼中我們需要用這個(gè)值的具體數(shù)字，我們是沒(méi)有辦法用的，“auto”又不是數(shù)字，所以如果需要用這個(gè)數(shù)值，一定要設(shè)置好。
今天我在獲取絕對(duì)定位位置的時(shí)候，初始沒(méi)有設(shè)置left和top，因?yàn)樾南肽J(rèn)就是0嘛，從0開(kāi)始就不寫了。但是在ie中一直報(bào)錯(cuò)，才發(fā)現(xiàn)獲取的是auto而不是0，才讓我在后面的代碼中無(wú)法使用獲取到的left和top數(shù)值，設(shè)置上就不報(bào)錯(cuò)了，所以一定要注意?。ㄎ艺f(shuō)的是需要使用獲取到的數(shù)值的情況，如果不使用數(shù)值還是具體情況具體分析）。