js獲取元素樣式的具體信息

var box = document.getElementById("dian");
 獲取元素的某一個具體形式屬性值

1.元素.style.屬性名
 ->這種方式需要要元素的樣式寫在行內（寫在樣式表中不獲取不到）
 ->在真實項目中，這種方式不常用，因為不能為了獲取把所有樣式寫在行內（無法實現css和html分離）

2.使用window.getComputedStyle這個方法獲取所有經過瀏覽器計算過的樣式。
->所有經過瀏覽器計算過的樣式：只要當前的元素標簽可以在頁面中呈現出來，那么它的所有的樣式都是經過瀏覽器計算過得（渲染過的）->哪怕有些沒有寫的樣式也可以獲取到。
->語法：window.getComputedStyle(當前要操作的元素對象，當前元素的偽類一般不寫偽類寫null)。
console.log(window.getComputedStyle(box,null).width);//或者
console.log(window.getComputedStyle(box,null)["width"]);

3.方法雖然好用但是在ie6-8下不兼容：因為window沒有getComputedStyle這個屬性->ie6-8執行這個方法會報錯
 console.log(window.getComputedStyle);//undefined
 ->在ie6-8中可以使用currentStyle來獲取所有經過瀏覽器計算過的樣式。
 console.log(box.currentStyle.width);

 1)利用try catch(e) 解決兼容問題
 ->curEle:獲取樣式的元素
 ->attr:獲取樣式的屬性

function getCss(curEle,attr){
        var val = null;
        try{
              val = window.getComputedStyle(curEle,null)[attr];
        }catch(e){
              val = curEle.currentStyle[attr];
        }
        return val;
 }
 console.log(getCss(box,"width"));

 

2)利用判斷是否有getComputedStyle屬性解決兼容問題 性能比try catch好

function getCss(curEle,attr){
      var val = null;
      if("getComputedStyle" in window){
            val = window.getComputedStyle(curEle,null)[attr];
      }else{
            val = curEle.currentStyle[attr];
      }
      return val;
 }

console.log(getCss(box,"width"));

 

3) 通過檢測瀏覽器版本和類型處理兼容
 ->window.navigator.userAgent 獲取瀏覽器信息
 獲取當前瀏覽器為ie6-8
 ->/MSIE(6|7|8)/.test(navigator.userAgent);

function getCss(curEle,attr){
         var val = null;
         if(/MSIE(6|7|8)/.test(navigator.userAgent)){ 
                     val = curEle.currentStyle[attr];
         }else{
                     val = window.getComputedStyle(curEle,null)[attr];
         }
         return val;
 }
console.log(getCss(box,"width"));

 

第一次升級：把獲取到單位的樣式值單位值去掉
->只有符合”數字+單位/數字“才可以使用parseFloat

function getCss(curEle,attr){
           var val = null,reg = null;
           if("getComputedStyle" in window){
                    val = window.getComputedStyle(curEle,null)[attr];
           }else{
                    val = curEle.currentStyle[attr];
           }
           reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
           return reg.test(val)?parseFloat(val):val;
 }
 console.log(getCss(box,"width"));

 

第二次升級：有些屬性在瀏覽器上是不兼容的例如opacity

function getCss(curEle,attr){
           var val = null,reg = null;
           if("getComputedStyle" in window){
                   val = window.getComputedStyle(curEle,null)[attr];
           }else{
                  if(attr === "opacity"){
                        val = curEle.currentStyle["filter"];
                        reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                        val = reg.test(val)?reg.exec(val)[1]/100:1;
                  }else{
                      val = curEle.currentStyle[attr];
                  }
          }
          reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
          return reg.test(val)?parseFloat(val):val;
}
console.log(getCss(box,"width"));