DOM之width、height、left、top

startXUEBA 2011-07-19

这几个东西涉及到很多属性,而这些属性又有各种兼容性问题,我在这总结一下:

offset系列:

offsetParent:offset系列的核心。一个DOM元素的offsetParent一般是body,如果该元素的父容器定义过position:relative/absolute/fixed之一,offetParent就为它的父容器。详情请见:http://www.cftea.com/c/2009/01/4026MR6TVPE62NGS.asp

offsetWidth:对象的可见宽度,已经算上了滚动条的宽度(比如我们看到内容区+滚动条的宽度等于100px,这就是它的offsetWidth,而内容区=100px-滚动条宽度),会随窗口的显示大小改变。一般是css定义的width+padding+border(如果有滚动条,offsetWidth也不会变,只会减少width来容纳滚动条)

offsetHeight:对象的可见高度,包滚动条等边线,会随窗口的显示大小改变。一般是css定义的height+padding+border

offsetLeft:相对offsetParent,一般是从元素左边框的外侧到offsetParent左边框的内侧的距离(offsetParent.paddingLeft+el.marginLeft)

offsetTop:相对offsetParent,一般是从元素上边框的外侧到offsetParent上边框的内侧的距离(offsetParent.paddingTop+el.marginTop)[我测试IE6/7有问题,总之就是元素最外边到父元素最内边]

scroll系列:

scrollWidth:元素的实际内容的宽度,不包括border,会随元素中内容的多少改变(内容多了可能会改变元素的实际宽度)。一般是css定义的width+padding

scrollHeight:元素的实际内容的高度,不包括border,会随元素中内容的多少改变(内容多了可能会改变元素的实际高度)。一般是css定义的height+padding

scrollLeft:如果没有出现滚动条,一般是0。如果出现滚动条,一般等于向右滚的距离

scrollTop:如果没有出现滚动条,一般是0。如果出现滚动条,一般等于向下滚的距离

client系列:(不包含border和滚动条)

clientWidth:一般等于width+padding

clientHeight:一般等于height+padding

clientLeft:我测试的结果等于borderLeft

clientTop:我测试的结果等于borderTop

相关推荐