1.偏移量
首先要介绍的属性涉及偏移量(offset dimension),包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(注意,不包括外边距)。通过下列4个属性可以取得元素的偏移量。
offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。
所有这些偏移量属性都是只读的,而且每次访问它们都需要重新计算。因此,应 该尽量避免重复访问这些属性;如果需要重复使用其中某些属性的值,可以将它们保
存在局部变量中,以提高性能。
2.客户区大小
元素的客户区大小(client dimension),指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth和clientHeight。其中,clientWidth属性是元素内容区宽度加上左右内边距宽度;clientHeight属性是元素内容区高度加上上下内边距高度。
3.滚动大小
最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小。有些元素(例如
元素),即使没有执行任何代码也能自动地添加滚动条;但另外一些元素,则需要通过CSS的8overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。
scrollHeight:在没有滚动条的情况下,元素内容的总高度。scrollWidth:在没有滚动条的情况下,元素内容的总宽度。scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。