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”