如何取得HTML物件的大小

常常在透過DHTML來動態處理Browser頁面上物件的配置時,除了物件位置的取得外,時常也需要知道其他物件的大小,來計算其相對的位置所在.
然而在取得HTML物件的大小,即Width和Height的數值時,方式上可以區分以下幾種：

1.透過Tag中所設定的Attribute取得：例如<table width=100>....
<script>
var t = document.getElementById("table id");
var w = t.width;
</script>
(但這樣的方式,不一定所有Tag皆有Width的Attribute,而且所取得的Width不代表真正該物件在頁面上實際的Pixel寬度,例如上面的table會受cellpadding、cellspacing、border等等的影響)

2.透過style.width的Property取得：
<script>
var t = document.getElementById("table id");
var w = t.style.width;
</script>
(不過這樣的方式,必須是在Tag當中有使用Style的方式來設定width的屬性,否則此方式無效;另外,如同第1種方式,所取得的Width不代表真正該物件在頁面上實際的Pixel寬度)

3.透過offsetWidth的Property取得：
<script>
var t = document.getElementById("table id");
var w = t.offsetWidth;
</script>
(這樣的方式,是目前較常用的方式)

雖然上述第3種似乎解決了另外第1、2種方式的問題,但也不是所有情況都適用.最常發生的問題,就是當物件本身的style.display屬性為none時(這是最常應用在動態隱常或顯示物件的技巧之一),第3種方式則無法取得正確的width數值.