不同瀏覽器對offsetWidth和offsetHeight屬性的解析標準是不同的，這種不同會在動畫的精確控制中產生一定影響。更重要的是，元素顯示環境的複雜性導致了元素在不同場合下所呈現的效果不同。在某些情況下，需要精確計算元素的尺寸，這時候可以選用一些HTML元素特有的屬性，見表6.2。這些屬性雖然還不是DOM標準的一部分，但是由於它們得到了所有瀏覽器的支持，因此在JavaScript開發中還是被普遍應用。
為了更直觀地比較這些屬性的異同，現在設計一個簡單的盒模型，盒模型的height值為200像素，width值為200像素，邊框顯示為50像素，補白區域定義為50像素。盒模型內部包含信息框，其寬度為400像素，高度也為400像素，換句話說就是盒模型的內容區域為（400px，400px）。設置結構和樣式的代碼如下：
＜p＞
＜p＞＜/p＞
＜/p＞
然後，利用JavaScript腳本在信息框中插入一些行列號，以方便觀察。
var info=document.getElementById("info");
var m=0,n=1,s="";
while(m++＜19){
s+=m+"";
}
s+="＜br/＞";
while(n++＜21){
s+=n+"＜br/＞";
}
info.innerHTML=s;
盒模型呈現效果如圖6.7所示。
圖 6.7 盒模型及其相關構成區域
現在分別調用offsetHeight、scrollHeight、clientHeight屬性，以及自定義函數getH，可以看到獲取了不同區域的高度（如圖6.8所示）。
var p=document.getElementById("p");
var ho=p.offsetHeight;//返回400
var hs=p.scrollHeight;//返回502
var hc=p.clientHeight;//返回283
var hg=getH(p);//返回400
通過對圖6.8的比較，可以很直觀地看出offsetHeight、scrollHeight、clientHeight這3個屬性與自定義函數getH的值，具體說明如下：
圖 6.8 盒模型不同區域的高度示意圖
offsetHeight=border-top-width+padding-top+height+padding-bottom+borde r-bottom-width
scrollHeight=padding-top+包含內容的完全高度+padding-bottom
clientHeight=padding-top+height+border-bottom-width-滾動條的寬度
以上的介紹都是圍繞元素高度進行的，針對元素寬度的計算方式也是如此，這裡就不再重複解釋了。注意，針對scrollHeight和scrollWidth屬性，不同瀏覽器對它們的解析方式是不同的。結合上面的示例，具體說明見表6.3。
如果設置盒模型的overflow屬性為visible，就會發現clientHeight的值為300，即：
clientHeight=padding-top+height+border-bottom-width
也就是說，如果隱藏滾動條顯示，則clientHeight屬性值不用減去滾動條的寬度，即滾動條的區域被轉化為可視內容區域。同時，不同瀏覽器對於clientHeight和clientWidth的解析也不同，再結合上面示例，具體說明見表6.4。
