本文详细解析了DOM元素的offset系列属性（offsetParent, offsetWidth, offsetHeight, offsetLeft,.offsetTop）和scroll系列属性（scrollWidth, scrollHeight, scrollLeft, scrollTop）的用途、工作原理及常见兼容性问题，旨在帮助开发者更深入地理解和运用这些属性进行布局与滚动处理。
这几个东西涉及到很多属性，而这些属性又有各种兼容性问题，我在这总结一下：
[b][size=large]offset系列：[/size][/b]
[b]offsetParent[/b]：offset系列的核心。一个DOM元素的offsetParent一般是body，如果该元素的父容器定义过position:relative/absolute/fixed之一，offetParent就为它的父容器。详情请见：[url]http://www.cftea.com/c/2009/01/4026MR6TVPE62NGS.asp[/url]
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有问题，总之就是元素最外边到父元素最内边]
[b][size=large]scroll系列：[/size][/b]
scrollWidth：元素的实际内容的宽度，不包括border，会随元素中内容的多少改变（内容多了可能会改变元素的实际宽度）。一般是css定义的width+padding
scrollHeight：元素的实际内容的高度，不包括border，会随元素中内容的多少改变（内容多了可能会改变元素的实际高度）。一般是css定义的height+padding
scrollLeft：如果没有出现滚动条，一般是0。如果出现滚动条，一般等于向右滚的距离
scrollTop：如果没有出现滚动条，一般是0。如果出现滚动条，一般等于向下滚的距离
[b][size=large]client系列：[/size][/b]（不包含border和滚动条）
clientWidth：一般等于width+padding
clientHeight：一般等于height+padding
clientLeft：我测试的结果等于borderLeft
clientTop：我测试的结果等于borderTop
[b][size=large]offset系列：[/size][/b]
[b]offsetParent[/b]：offset系列的核心。一个DOM元素的offsetParent一般是body，如果该元素的父容器定义过position:relative/absolute/fixed之一，offetParent就为它的父容器。详情请见：[url]http://www.cftea.com/c/2009/01/4026MR6TVPE62NGS.asp[/url]
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有问题，总之就是元素最外边到父元素最内边]
[b][size=large]scroll系列：[/size][/b]
scrollWidth：元素的实际内容的宽度，不包括border，会随元素中内容的多少改变（内容多了可能会改变元素的实际宽度）。一般是css定义的width+padding
scrollHeight：元素的实际内容的高度，不包括border，会随元素中内容的多少改变（内容多了可能会改变元素的实际高度）。一般是css定义的height+padding
scrollLeft：如果没有出现滚动条，一般是0。如果出现滚动条，一般等于向右滚的距离
scrollTop：如果没有出现滚动条，一般是0。如果出现滚动条，一般等于向下滚的距离
[b][size=large]client系列：[/size][/b]（不包含border和滚动条）
clientWidth：一般等于width+padding
clientHeight：一般等于height+padding
clientLeft：我测试的结果等于borderLeft
clientTop：我测试的结果等于borderTop
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
