js學習總結----獲取元素的具體樣式信息getcss

如果想獲取元素的某一個具體的樣式屬性值

1、元素.style.屬性名

需要我們把元素的樣式都寫在行內樣式上才可以（寫在樣式表中是不管用的）

console.log(box.style.height)  ->null

在真實項目中，這種方式不常用，因為不能為了獲取值而把所有的樣式都寫在行內（無法實現html和css的分離）

2、使用window.getComputedStyle(當前操作的元素對象，當前元素的偽類【一般我們不用偽類寫null】)這個方法獲取所有經過瀏覽器計算過的樣式

所有經過瀏覽器計算過的樣式：只要當前的元素標簽可以在頁面中呈現出來，那么他的所有樣式都是經過瀏覽器計算過的（渲染過的）->哪怕有些樣式你沒有寫，我們也可以獲取到

獲取的結果是CSSStyleDeclaration這個類的實例：包含了當前元素的所有樣式屬性和值

console.log(window.getComputedStyle);//function

console.log(window.getComputedStyle(box,null))["height"]

3、方法雖然好用，但是在IE6-8下是不兼容的：因為window下沒有getComputedStyle這個屬性->會報錯

　　在IE6-8下我們可以使用currentStyle來獲取所有經過瀏覽器計算過的樣式

　　console.log(box.currentStyle)

　　console.log(box.currentStyle.height)

獲取樣式的兼容寫法getCss：獲取當前元素所有經過瀏覽器計算過的樣式中的[attr]對應的值

/*
            curEle:[object] 當前要操作的元素對象 
            attr:[string] 我們要獲取的樣式屬性的名稱
            1、使用try、catch來處理兼容（只有在不得已的情況下）
               前提:必須保證try中的代碼在不兼容的時候報錯，這樣才可以catch捕獲到錯誤信息,進行其他的處理
               不管當前的瀏覽器是否支持這個方法，都需要把try中的代碼執行一遍，如果當前是IE7，window.getComputedStyle不兼容，但是也需要執行一遍再執行catch里面的代碼，執行了兩遍，消耗性能，
            2、判斷當前瀏覽器中是否存在這個屬性或者方法，存在就兼容，不存在就不兼容
            3、通過檢測瀏覽器版本和類型來處理兼容 window.navigator.userAgent
            獲取當前瀏覽器是IE6-8
            
        */
        function getCss(curEle,attr){
            var val = null;
            //方法2
            if("window.getComputedStyle" in window){//或者window.getComputedStyle
                var = window.getComputedStyle(curEle,null)[attr];
            }else{
                var = curEle.currentStyle[attr];
            }
            //方法1
            try{
                var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){
                var = curEle.currentStyle[attr];
            }
            //方法3
            if(/MSIE (6|7|8)/.test(navigator.userAgent)){
                var = curEle.currentStyle[attr];
            }else{
                var = window.getComputedStyle(curEle,null)[attr];
            }
            return val;        
        }

console.log(getCss(box,"border"))
        console.log(getCss(box,"fontFamily"))

標准瀏覽器和IE瀏覽器獲取的結果還是不一樣的->對於部分樣式屬性，不同瀏覽器獲取的結果不一樣，主要是由於getComputedStyle和currentStyle在某些方面不一樣

對於復合的樣式值可以拆開來獲取

console.log(getCss(box,"marginTop"))

上面的getCss還沒有寫完，下面進行第一次升級：把獲取的樣式值“單位去掉”（只有符合“數字+單位/數字”才可以使用parseFloat）

function getCss(curEle,attr){
            var val = null;
            var reg = null;
            if(/MSIE (6|7|8)/.test(navigator.userAgent)){
                var = curEle.currentStyle[attr];
            }else{
                var = window.getComputedStyle(curEle,null)[attr];
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;

            return reg.test(val)?parseFloat(val):val; //這樣寫肯定不行，對於某些樣式屬性的值是不能去單位的，例如：float position  margin  padding  border    這些復合值 background    
        }

第二次升級：有些樣式屬性在不同的瀏覽器中是不兼容的，例如opacity

 

function getCss(curEle,attr){
            var val = null;
            var reg = null;
            if(/MSIE (6|7|8)/.test(navigator.userAgent)){
                if(attr==="opacity"){
                    val = curEle.currentStyle["filter"];
                    //把獲取到的結果剖析，獲取里面的數字，讓數字除以100才和標准瀏覽器保持一致
                    reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val)?reg.exec(val)[1]/100:1

                }else{
                    val = curEle.currentStyle[attr];
                }                
            }else{
                //如果傳遞進來的結果是opacity，說明我想獲得的是透明度，但是在IE6-8下獲取透明度需要使用filter
                val = window.getComputedStyle(curEle,null)[attr];
            }
        }

 

在補充一個小的知識點:偽類

:before  :after  在一個元素便簽的前面或者后面創建一個新的虛擬標簽，我們可以給這個虛擬標簽增加樣式，也可以增加內容等...也可以通過偽類來進行清除浮動 可以通過如下方式獲取 window.getComputedStyle(box,"before").content