手寫的一個與各種瀏覽器相容的javascript getStyle函數(取得元素的樣式)_javascript技巧

想要取得HTML元素的運算樣式一直都存在著許多相容的問題，各瀏覽器都會存在一些差異，Firefox、webkit(Chrome,Safari)支援W3C標準的方法：getComputedStyle()，而IE6/7/ 8不支援標準的方法但是有私有的屬性來實作：currentStyle，IE9和Opera兩個都支援。有了這2個方法和屬性基本上可以滿足大多數要求了。

複製程式碼 程式碼如下:

var getStyle = function(>

var getStyle = function( elem, type ) > return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};

但是對於自適應的寬度和高度使用currentStyle就沒法獲取到計算的值，只能返回auto，而getComputedStyle()就可以返回計算的值，解決這個問題有好幾種辦法。我之前想到的是用clientWidth/clientHeight減去padding的值，這樣就可以在不支援標準方法的瀏覽器中取得到計算的寬度和高度。前幾天看到司徒正美採用了另一種辦法，使用getBoundingClientRect()方法取得到元素在頁面中的位置，然後right減去left就是寬度，bottom減去top就是高度。我對他的程式碼做了一些小小的修改，最終程式碼如下：

複製程式碼

程式碼如下:

var getStyle = function(>

var getStyle = function( elem return 'getComputedStyle' in window ?
 getComputedStyle( elem, null )[style] :
 function(){
  uncstyle = style.replace( /-(w)/ ){   return $1.toUpperCase();

  });

  var val =  elem.currentStyle[style];

  if( val === 'auto' && (style === "width" || style === "height") ){
   var rect =  elem.getBoundingClientRect();
 style === "width" ){
    return rect.right - rect.left 'px';
   }else{
    return rect.bot - rect.top 'ptom; 🎜>  }
  return val;
 }();
};

// 呼叫此方法
var test = document.getElementById( 'test' ),
      // 取得計算的寬度
  🎜>

新的問題，如果元素的寬度或高度使用了em或%的單位，getComputedStyle()傳回的值就會自動將em或%換成px的單位，currentStyle就不會，而如果是font- size使用em為單位，在Opera下方回傳的是0em，Opera真的很恐怖！

後來在使用發現中還有一些沒想到的兼容問題，今天我對原來的程式碼進行了優化，並對一些常見的兼容問題進行了處理。

在javascript中「-」(中劃線或連字符)代表的是減號，而在CSS中，許多樣式屬性都有這個符號，如padding-left、font-size等，所以在javascript中如果出現如下的程式碼就一個錯誤：

複製程式碼 程式碼如下:elem.style .margin-left = "20px";

正確的寫法應該是：

複製程式碼複製程式碼

複製程式碼

複製程式碼複製程式碼

複製程式碼

程式碼如下: elem.style.marginLeft = "20px";這裡需要把CSS的中劃線去掉並把原來緊跟在中劃線後的字母大寫，俗稱“駝峰式”寫法，不管是使用javascript設定或是取得元素的CSS樣式都應該是駝峰式的寫法。但不少對CSS熟悉而又對javascript不太熟悉的新手朋友總是會犯這種低級錯誤，使用replace的高級用法可以很簡單的將CSS屬性中的中劃線替換成駝峰式的寫法。 複製程式碼 程式碼如下:var newProp = prop.replace( /-(w)/g function( $, $1 ){    return $1.toUpperCase();});

對於float，在javascript中屬於保留字，在javascript中設定或取得元素的float的值，都有其他的代替寫法，在標準瀏覽器中為cssFloat，而在IE6/7/8中為styleFloat 。

如果top、right、bottom、left沒有一個明確的值，在取得這些值的時候部分瀏覽器會回傳一個auto，雖然auto這個值是一個合法的CSS屬性值，但絕不是我們想要的結果，而應該是0px。

在IE6/7/8中要設定元素的透明度需要用到濾鏡、如：filter:alpha(opacity=60)，對於標準瀏覽器直接設定opacity即可，IE9兩種寫法都支持，我對取得元素的透明度也做了相容處理，只要使用opacity就可以取得到所有瀏覽器元素的透明度的值。

在IE6/7/8中取得元素的寬度和高度已經在上篇文章中介紹過了，這裡就不再重述了。還有一個要注意的地方就是，如果元素的樣式是使用style內聯的寫法，或是已經使用javascript設定過樣式的屬性，可以使用下面的方法來取得到元素的計算樣式：

複製程式碼 程式碼如下:

var height = elem.style.height;

這個方法比讀取getComputedStyle或currentStyle中的屬性值都要快，應該優先使用，當然前提條件就是樣式是透過內聯的寫法設定的(使用javascript設定也是設定內聯樣式)。優化過的最終程式碼如下：

複製程式碼 程式碼如下:

var getStyle = function(>

var getStyle = function( > var rPos = /^(left|right|top|bottom)$/,
 ecma = "getComputedStyle" in window,
 // 將中劃線轉換成駝峰式如：padding-left => paddingLeft
 p = p.replace( /-(w)/g, function( $, $1 ){
 return $1.toUpperCase();
 });
 // 對float進行處理 
 p = p === "float" ? ( ecma ? "cssFloat" : "styleFloat" ) : p;

 return !!elem.style[p] ?

 return !!elem.style[p] ?

 return !!elem.style[p] ?
> ] :
 ecma ?
 function(){
 var val = getComputedStyle( elem, null )[p];
 // 處理top、right、bottom、left為auto> if( rPos.test(p) && val === "auto" ){
 return "0px";
 }
 return val;
 }() :
 return val;
 }() :
 return({
 var wirelesscasinogames.com val = elem.currentStyle[p];
 // 取得元素在IE6/7/8中的寬度與高度
  if( (p === "width" || p === "height") && val === "auto" ){
  var rect = elem.getBoundingClientRect();  return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
  }
 // 取得元素在IE6/7/8中的透明度
  if( p === "opacity" ){
  var filter = elem.currentStyle.filter;
  if( /opacity/.test(filter) ){
  if( /opacity/.test(filter) ){
 /d / )[0] / 100;
  return (val === 1 || val === 0) ? val.toFixed(0) : val.toFixed(1);
  }
else if( val === undefined ){
  return "1";
  }
  }
  // 處理top、right、bottom、left為auto的情況  if( rPos. test(p) && val === "auto" ){

  return "0px";

  }  return val;

 }();

};

下面是呼叫範例：

複製程式碼


程式碼如下:

<script><BR>var box = document.getElementById( "box" );<BR> <BR>alert( getStyle(box, "width") ); // "500px"<BR>alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"<BR>alert( getStyle(box, "opacity") ); // "0.6"alert( getStyle(box, "float") ); // "none"</script>