js訪問CSS的2種方法（點法和中括號法的區別），內含獲取屬性的兼容寫法

1.1 js 經常使用 訪問 CSS 屬性 

咱們訪問獲得css 屬性，比較經常使用的有兩種：

    1. 利用點語法

       box.style.width      box.style.top    

     點語法能夠獲得 width  屬性  和 top屬性  帶有單位的。 100px

     可是這個語法有很是大的缺陷，  不變的。

     後面的width  和 top  沒有辦法傳遞參數的。

      var w = width;

      box.style.w     

   2. 利用 []  訪問屬性

      語法格式:  box.style[「width」]   

                元素.style[「屬性」];

      console.log(box.style["left"]);

       最大的優勢  ：  能夠給屬性傳遞參數

 

 

 

1.2 獲得css 樣式  

咱們想要得到css 的樣式， box.style.left    box.style.backgorundColor

可是它只能獲得   行內的樣式。

可是咱們工做最多用的是 內嵌式 或者 外鏈式 。

怎麼辦？

   核心： 咱們怎麼才能獲得內嵌或者外鏈的樣式呢？  

  1.   obj.currentStyle   ie  opera  經常使用

外部（使用<link>）和內嵌（使用<style>）樣式表中的樣式（ie和opera）

2 .window.getComputedStyle("元素", "僞類")     w3c

兩個選項是必須的， 沒有僞類 用 null 替代

3 兼容寫法 ：

    咱們這個元素裏面的屬性不少， left  top  width  ===

 咱們想要某個屬性， 就應該 返回改屬性，全部繼續封裝 返回當前樣式的 函數。

1   var demo = document.getElementById("demo");

1     function getStyle(obj,attr) {  //  誰的      那個屬性

2         if(obj.currentStyle)  // ie 等

3         {

4             return obj.currentStyle[attr];  

5         }

6         else

7         {

8             return window.getComputedStyle(obj,null)[attr];  // w3c 瀏覽器

9         }

10     }

11     console.log(getStyle(demo,"width"));