javascript擷取元素的offsetWidth/offsetHeight方法

網頁特效擷取元素的offsetWidth/offsetHeight方法
思路很簡單：擷取元素的offsetWidth/offsetHeight，減去元素的padding和border
元素通過引入樣式表設定width/height

有兩種方式引入樣式表，一是使用link標籤引入單獨的css教程檔案，二是直接在html頁面中使用style標籤。這裡使用第二種方式測試

<style>
 div {width: 100px}
</style>
<div>test<div>
<script>
 function getStyle(el, name) {
  if(window.getComputedStyle) {
   return window.getComputedStyle(el, null);
  }else{
   return el.currentStyle;
  }
 }
 var div = document.getElementsByTagName('div')[0];
 alert(getStyle(div, 'width'));
</script>

所有瀏覽器中均彈出了100px。說明通過getComputedStyle和currentStyle可以擷取到元素被定義在樣式表中的寬高。

那如果元素即沒有在style屬性中設定寬高，也沒有在樣式表中設定寬高，還能用getComputedStyle或currentStyle擷取嗎？答案是getComputedStyle可以，currentStyle不可以。如下

<div>test<div>
<script>
 function getStyle(el, name) {
  if(window.getComputedStyle) {
   return window.getComputedStyle(el, null);
  }else{
   return el.currentStyle;
  }
 }
 var div = document.getElementsByTagName('div')[0];
 alert(getStyle(div, 'width'));
</script>

div 既沒有設定style屬性，也沒有引入樣式表。在Firefox/IE9/Safari/Chrome/Opera中可以擷取到寬高（瀏覽器預設），但IE6/7/8中卻不行，返回的是auto。

注意，這裡getStyle方法優先使用getComputedStyle，而IE9已經支援該方法。因此IE9中可以擷取到寬高。但IE6/7/8不支援，只能使用currentStyle擷取

<div>test<div>
<script>
 function getStyle(el) {
  if(window.getComputedStyle) {
   return window.getComputedStyle(el, null);
  }else{
   return el.currentStyle;
  }
 }
 function getWH(el, name) {
  var val = name === "width" ? el.offsetWidth : el.offsetHeight,
   which = name === "width" ? ['left', 'right'] : ['top', 'bottom'];
  
  // display is none
  if(val === 0) {
   return 0;
  }

  for(var i = 0, a; a = which[i++];) {
   val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0;
   val -= parseFloat( getStyle(el, "padding" + a) ) || 0;
  }
 
  return val + 'px';
 }
 var div = document.getElementsByTagName('div')[0];
 alert(getWH(div, 'width'));
</script>