1、ele.style
在學(xué)習(xí)DOM的時候就看到通過ele.style來獲取元素樣式值，但是有時候獲取的并非是節(jié)點的樣式值，而是空值。這是因為ele.style只能獲取寫在元素標(biāo)簽中的style屬性里的樣式值，無法獲取到定義在<style></style>和通過<link href="css.css">加載進(jìn)來的樣式屬性

例子：

復(fù)制代碼代碼如下:

        var test = document.getElementById("test");

        //獲取節(jié)點的color

        test.style.color;

2、getComputedStyle()
getComputedStyle是一個可以獲取當(dāng)前元素所有最終使用的CSS屬性值。

語法如下：

window.getComputedStyle("元素", "偽類");

這個方法接受兩個參數(shù)：要取得計算樣式的元素和一個偽元素字符串（例如“:before”）。如果不需要偽元素信息，第二個參數(shù)可以是null。也可以通過document.defaultView.getComputedStyle("元素", "偽類");來使用

例子：

復(fù)制代碼代碼如下:

        var test = document.getElementById("test"),

        demo = window.getComputedStyle(test, null); 

        //獲取節(jié)點的color

         demo.color

注意：Firefox和Safari會將顏色轉(zhuǎn)換成rgb格式，如果test節(jié)點上沒有任何樣式，通過style.length來查看瀏覽器默認(rèn)樣式的個數(shù)。IE6-8不支持該方法，需要使用下面的方法

3、ele.currentStyle
currentStyle是IE瀏覽器自己的一個屬性，其語法與ele.style類似，差別在于element.currentStyle返回的是元素當(dāng)前應(yīng)用的最終CSS屬性值（包括外鏈CSS文件，頁面中嵌入的<style>屬性等）。

語法：

var style = dom.currentStyle;

例子：

復(fù)制代碼代碼如下:

        var test = document.getElementById("test"),

        demo = test.currentStyle; 

        //獲取節(jié)點的color

        demo.color;

注意：對于綜合屬性border等，ie返回undefined，其他瀏覽器有的返回值，有的不返回，但是borderLeftWidth這樣的屬性是返回值的

4、getPropertyValue()
getPropertyValue獲取CSS樣式的直接屬性名稱

語法如下：

window.getComputedStyle(element, null).getPropertyValue(屬性)

例子：

復(fù)制代碼代碼如下:

      var test = document.getElementById('test');

      window.getComputedStyle(test, null).getPropertyValue("background-color");

注意：屬性名不支持駝峰格式，IE6-8不支持該方法，需要使用下面的方法

5、getAttribute
getAttribute與getPropertyValue類似，有一點的差異是屬性名駝峰格式

例子：

復(fù)制代碼代碼如下:

        var test = document.getElementById('test');

        window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意：該方法只支持IE6-8

小結(jié)：
jQuery的CSS()方法，其底層運作就應(yīng)用了getComputedStyle以及getPropertyValue方法，當(dāng)我們使用原生的js開發(fā)時就可以通過以上方法獲取元素的值。

下面是一個兼容ie,firefox,chrome等瀏覽器的獲取元素樣式的方法，可以應(yīng)用到項目中

復(fù)制代碼代碼如下:

 function getStyle(ele) {

     var style = null;

     if(window.getComputedStyle) {

         style = window.getComputedStyle(ele, null);

     }else{

         style = ele.currentStyle;

     }

     return style;

 }

您可能感興趣的文章: