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

說到獲取樣式，可能我們會首先想到element.style.attribute堵腹，但是這種方式只能獲取行間樣式炸站，非行間樣式是獲取不到的：

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

div

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

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

運行結(jié)果：無法獲取

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

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

獲取成功

二旱易、ie兼容問題

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

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

獲取成功

三阀坏、封裝函數(shù)

標(biāo)準瀏覽器和低版本ie瀏覽器互相是不認識對方的方法的，為了同時兼容笆檀，我們可以嘗試獲取其中一種忌堂，如果成功，就直接獲取并且返回酗洒，失敗就使用另一種方式獲仁啃蕖：

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

調(diào)用：

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

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

四棋嘲、注意事項

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

2、凡是js中需要獲取的樣式耍鬓，在css中一般情況下一定要設(shè)置好相關(guān)的樣式阔籽，比如說假設(shè)body的寬度是1200px，剛剛的div如果不設(shè)寬牲蜀，默認會占一整行，也就是同樣為1200px绅这。
這時候涣达，如果我們在標(biāo)準瀏覽器中使用getComputedStyle獲取，可以正常獲取到1200px，而在ie中使用currentStyle獲取度苔，獲取到的會是auto匆篓，如果在后面的代碼中我們需要用這個值的具體數(shù)字，我們是沒有辦法用的寇窑，“auto”又不是數(shù)字鸦概，所以如果需要用這個數(shù)值，一定要設(shè)置好甩骏。
今天我在獲取絕對定位位置的時候窗市，初始沒有設(shè)置left和top，因為心想默認就是0嘛饮笛，從0開始就不寫了咨察。但是在ie中一直報錯，才發(fā)現(xiàn)獲取的是auto而不是0福青，才讓我在后面的代碼中無法使用獲取到的left和top數(shù)值摄狱，設(shè)置上就不報錯了无午，所以一定要注意懊揭邸（我說的是需要使用獲取到的數(shù)值的情況宪迟，如果不使用數(shù)值還是具體情況具體分析）。