原生javascript取得元素樣式_javascript技巧

摘要：
    我們在開發過程中常會遇到透過js取得或改變DOM元素的樣式，方法有很多，例如：透過更改DOM元素的class。現在我們討論原生js來取得DOM元素的CSS樣式，注意是取得不是設定

    在開始之前先說下取得所有最終套用在元素上的CSS屬性物件的意思是，如果沒有給元素設定任何樣式，也會把瀏覽器預設的樣式回傳。

1、ele.style
    在學習DOM的時候就看到透過ele.style來取得元素樣式值，但是有時候取得的並非是節點的樣式值，而是空值。這是因為ele.style只能取得寫在元素標籤中的style屬性裡的樣式值，無法取得到定義在和透過載入進來的樣式屬性

    例：

複製程式碼 程式碼如下:

        var test = document.getElementById("test");
        //取得節點的color
        test.style.color;

2、getComputedStyle()
    getComputedStyle是可以取得目前元素所有最終使用的CSS屬性值。

    文法如下：

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

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

    例：

複製程式碼 程式碼如下:

        var test = document.getElementById("test"),
        demo = window.getComputedStyle(test, null);
        //取得節點的color
         demo.color 

    注意：Firefox和Safari會將顏色轉換成rgb格式，如果test節點上沒有任何樣式，透過style.length來查看瀏覽器預設樣式的數量。 IE6-8不支援此方法，需要使用下面的方法

3、ele.currentStyle
currentStyle是IE瀏覽器本身的屬性，其語法與ele.style類似，差別在於element.currentStyle返回的是元素當前應用的最終CSS屬性值（包括外鏈CSS文件，頁面中嵌入的

    文法：

        var style = dom.currentStyle;

    例：

複製程式碼 程式碼如下:

        var test = document.getElementById("test"),
        demo = test.currentStyle;
        //取得節點的color
        demo.color;

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

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

    文法如下：

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

    例：

複製程式碼 程式碼如下:

      var test = document.getElementById('test');
      window.getComputedStyle(test, null).getPropertyValue("background-color");

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

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

    例：

複製程式碼 程式碼如下:

        var test = document.getElementById('test');
        window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

    注意：此方法只支援IE6-8

小結：
    jQuery的CSS()方法，其底層運作就應用了getComputedStyle以及getPropertyValue方法，當我們使用原生的js開發時就可以透過以上方法取得元素的值。

以下是一個相容ie,firefox,chrome等瀏覽器的取得元素樣式的方法，可以套用到專案中

複製程式碼 程式碼如下:

 function getStyle(ele) {
     var style = null;
    
     if(window.getComputedStyle) {
         style = window.getComputedStyle(ele, null);
     }else{
         style = ele.currentStyle;
     }
    
     return style;
 }