元素大小
偏移量
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)作为起点坐标