currentstyle和getComputedStyle兼容問題


currentStyle:獲取計算后的樣式,也叫當前樣式、終於樣式。

長處:能夠獲取元素的終於樣式,包含瀏覽器的默認值,而不像style僅僅能獲取行間樣式,所以更經常使用到。
注意:不能獲取復合樣式如background屬性值,僅僅能獲取單一樣式如background-color等。

alert (oAbc.currentStyle);
很遺憾的是,這個好使的東西也不能被各大瀏覽器完美地支持。准確地說,在我測試的瀏覽器中,IE8和Opera 11彈出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5則彈出“undefined”。

盡管currentStyle無法適用於全部瀏覽器,可是能夠依據以上測試的結果來區分開支持、不支持的瀏覽器,然后再找到兼容的寫法。

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
        //IE、Opera
        alert("我支持currentStyle");
} else {
        //FF、chrome、safari
        alert("我不支持currentStyle");
}
事實上在FF瀏覽器中我們能夠使用getComputedStyle(obj,false)來達到與IE下currentStyle同樣的效果。

getComputedStyle(obj,false):在FF新版本號中僅僅須要第一個參數,即操作對象,第二個參數寫“false”也是大家通用的寫法,目的是為了兼容老版本號的火狐瀏覽器。

兼容寫法:

var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
        //IE、Opera
        //alert("我支持currentStyle");
        alert(oAbc.currentStyle.width);
} else {
        //FF、chrome、safari
        //alert("我不支持currentStyle");
        alert(getComputedStyle(oAbc,false).width);
}
一個空白頁面中body的id=”abc”,測試以上代碼,IE和Opera彈出“auto”,其他三款瀏覽器則彈出“***px”。盡管結果不同,可是能夠發現chrome和safari也都和火狐一樣,順利地讀取到了屬性值。不支持currentStyle的三款瀏覽器(FF、chrome、safari),都是支持getComputedStyle的。

結果表明:對瀏覽器是否支持currentStyle的推斷 + getComputedStyle,就能夠做到兼容各主流瀏覽器的效果。並且兼容寫法並不復雜,你掌握了嗎?^_^

支持currentStyle:IE、Opera
支持getComputedStyle:FireFox、Chrome、Safari

注意最后的彈出內容,currentStyle返回瀏覽器的默認值”auto”,而getComputedStyle則返回詳細的值”**px”。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM