如何取得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數值.

如何動態新增Javascript Script

在DHTML的程式撰寫上, 常常利用<script>來執行相關Client端的程式化動作, 但如果要在Client端來動態產生<script>的程式段, 又要如何來做? 請參考以下程式範例：

var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.text = 'alert("hello!");'; // 主要的Javascript Code, 但是要記得是以文字字串組成
document.body.appendChild(script);

如何取得HTML物件的位置

對於Web Client Programming來說, 如何取得HTML物件的位置, 是時常會需要用到的技巧.
如果HTML物件本身透過Style屬性來設定top或left的數值, 或許可以用下列方式直接取得：

function getTop(el)
{
return obj.style.top;
}

但, 針對沒有設定Style屬性的物件, 方式上就需要改變下列方式：

function getTop(el)
{
var top = 0;
while (el) {
top += el.offsetTop;
el = el.offsetParent;
}
return top;
}

以上, 取得Left位置的做法相同, 就請自行試試看!