獲取元素的具體樣式信息

標簽（空格分隔）： 未分類

引子：前面的屬性都是組合的寬高，那么如何獲取一個div的寬或者高

1.元素.style.屬性名
需要我們把元素的樣式都寫在行內(nèi)樣式上；

2.使用window.getComputedStyle這個方法獲取所有經(jīng)過瀏覽器計算過的樣式；

所有經(jīng)過瀏覽器計算過的樣式；只要當前的元素標簽可以在頁面中呈現(xiàn)出來，那么他的所有樣式都是經(jīng)過瀏覽器計算過的（渲染過的） --- 即使有些樣式并沒有設置；我們也可以獲取到；

console.log(window.getComputedStyle(box,null).width);  //box是當前要操作的元素對象，null是當前元素的偽類，一般不用寫none；
//獲取到的結果：CSSStyleDeclaration  這個類的一個實例，包含當前樣式的所有樣式和屬性

3.ie6-8不兼容解決；因為window下沒有getComputedStyle,在IE6-8會報錯；

//在ie6-8可以使用currentStyle來獲取所有經(jīng)過瀏覽器計算過的樣式

console.log(box.currentStyle.width);

//獲取當前所有瀏覽器計算過的樣式中的[attr]
//curEle當前要操作的對象，attr我們要獲取的樣式的名稱

//1.使用try   catch;
functio getCss(curEle,attr){
    var val  = null;
    try {
        val = window.getComputedStyle(curEle,null)[attr];
        } catch (e) {
            val = curEle.currentStyle[attr]
        }
    return val;
    
    }
    
    //需要保證try代碼在不兼容瀏覽器中必須報錯2.必須執(zhí)行兩次代碼，浪費性能；

改進版2.0；

\\檢測window下是否包含getComputdStyle這個屬性
function getCss(curEle,attr){
    if ("getComputedStyle" in window){
    
    var = window。getComputedStyle(curEle,null)
    }else{
        val = curEle.currentStyle[attr]
    }
    return val;
    }

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

3.通過檢測瀏覽器版本和類型來處理兼容

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

對于部分樣式屬性，不同的瀏覽器獲取的結構不一樣，比如font-familufont-family;border;margin
因此寫CSS進來第一步初始化默認樣式，1.可以避免不同瀏覽器的差異，而且對js獲取同一，也有幫助；
2.把復合值拆開使用；

升級

getCSS方法獲取的值帶px;

//把獲取到的樣式的單位值去掉
//只有數(shù)字加單位的才可以使用parseFloat;

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

兩種寫法的不同

var val = null,reg=null;

var val = reg = null;  //reg是全局變量

瀏覽器不兼容某些元素：如opacity;

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