《编写高质量代码：改善JavaScript程序的188个建议》建议132：正确计算区域大小

不同浏览器对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所示。

现在分别调用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的值，具体说明如下：

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。