JavaScript高级程序设计34.pdf

元素大小

偏移量

offsetHeight：元素在垂直空间上占用的大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

offsetWidth：元素在水平空间上占用的大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

其中offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中，offsetParent属性不一定与parentNode的值相等，它是与包含元素最近的具有大小的元素

对于简单的CSS布局页面（未使用表格和内嵌框架布局），不断的使offsetTop与offsetParent、offsetLeft与offsetParent相加可以测量到整个元素的偏移量

客户区大小

客户区大小指的是元素内容及其内边距所占据的空间大小，clientWidth属性是内容区宽度加上左右内边距宽度，clientHeight属性是内容区高度加上上下内边距高度

偏移量与客户区大小都是只读的，每次访问都要重新计算，频繁访问会影响性能

滚动大小

滚动大小指的是包含滚动内容的元素的大小，有4个属性：

scrollHeight：在没有滚动条的情况下，元素内容的总高度。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

scrollLeft：被隐藏在内容区域左侧的像素数，设置这个属性可以改变元素的滚动位置。

scrollTop：被隐藏在内容区域上方的像素数，设置这个属性可以改变元素的滚动位置。

在有滚动条的情况下，页面元素的总高度和总宽度是document.documentElement.scrollHeight和document.documentElement.scrollWidth。

对于不包含滚动条的页面而言

scrollHeight和scrollWidth与clientHeight和clientWidth之间的关系并不十分清晰，在基于document.documentElement查看这些属性会在不同浏览器之间发现一些不一致问题：

Firefox中两组属性始终相等，大小等于文档内容区域的实际尺寸，而非视口尺寸

Opera、Safari 3.1及更高版本、Chrome中这两组属性是有差别的，其中scrollHeight和scrollWidth等于视口大小， 而clientHeight和clientWidth等于文档内容区域的大小

IE（标准模式）两组属性并不相等，其中scrollHeight和scrollWidth等于文档内容区域的大小， 而clientHeight和clientWidth等于视口大小，（与第二条正相反）

在跨浏览器情况下，确定文档的总高度必须取得scrollHeight/clientHeight与scrollWidth/clientWidth的最大值Math.max()

确定元素大小

有一个getBoundingClientRect()方法，这个方法会返回一个矩形对象，包含4个属性：left、top、right和bottom，这些属性给出了元素在页面中相对于视口的位置，但是浏览器的实现会稍有不同，IE8及之前版本认为文档左上角坐标是(2,2),其他浏览器包括IE9正确地把(0,0)作为起点坐标