天天看点

offset、client和scroll三大家详解

作者:荣邦小伙917

Offset

offsetWidth 和 offsetHeight 是用来得到对象的大小,由自身宽高、内边距、边框构成但是不包括外边距。offsetHeight可以获取行内样式和内嵌样式值是数值类型的,而且是只读的不能修改。

offsetLeft 和 offsetTop 用来得到对象的位置,到距离自身最近的(带有定位的)父元素的左侧/顶部的距离,如果所有父级都没有定位则以body为准。offsetLeft 可以获取行内样式和内嵌样式。值是数值类型的,而且是只读,最重要的是offsetLeft以border左上角为基准。

offset、client和scroll三大家详解

client

clientWidth和clientHeight 包括内容区和内边距,不包括边框

clientTop和clientLeft 代表的是上边框boder-top和border-left

offset、client和scroll三大家详解

Scroll

scrollHeight和scrollWidth 对象内部实际内容的高度/宽度,包括内容区和内边距,不包括边框,即scrollHeight = height + padding + 未显示的内容的高度 - 滚动条的高度

scrollTop和scrollLeft 获取左侧和顶部滚动隐藏进去的内容的距离

offset、client和scroll三大家详解

继续阅读