如何取得元素的樣式屬性值？

如果想要取得元素的某一個具體的樣式屬性值，你需要怎麼做呢？下面小編就來帶大家來看看我是怎麼做的，希望能幫助大家。

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;//方法2if("window.getComputedStyle" in window){//或者window.getComputedStylevar = window.getComputedStyle(curEle,null)[attr];
            }else{var = curEle.currentStyle[attr];
            }//方法1try{var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){var = curEle.currentStyle[attr];
            }//方法3if(/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下获取透明度需要使用filterval = window.getComputedStyle(curEle,null)[attr];
            }}

 

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

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

 

#

以上是如何取得元素的樣式屬性值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！