第60天：js常用通路CSS屬性的方法

一、 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"]);

       最大的優點  ：  可以給屬性傳遞參數

二、  得到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 1    var demo = document.getElementById("demo");
 2 2      function getStyle(obj,attr) {  //  誰的      那個屬性
 3 3          if(obj.currentStyle)  // ie 等
 4 4          {
 5 5              return obj.currentStyle[attr];  
 6 6          }
 7 7          else
 8 8          {
 9 9              return window.getComputedStyle(obj,null)[attr];  // w3c 浏覽器
10 10          }
11 11      }
12 12      console.log(getStyle(demo,"width"));