offsetTop, scrollTop & clientTop 区别和联系 offsetWidth clientWidth

3,115 阅读1分钟

1, 元素位置属性的区别:

offsetParent:人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关 距离当前元素最近的经过定位(position不等于static) 的父级元素
这个是有点特殊的 深入了解可以参考:www.cnblogs.com/xiaohuochai…

Note:  以下几种情况 offsetParent会返回null

  • 元素自己或者他父元素的”display:none“
  • 元素设置position是fixed (firefox 会返回 <body>).
  • 元素是 <body> or <html>.

offsetTop : 只读 相对于offsetParent的垂直方向偏移量(当滚动页面时,相对父元素位置不变 自然看起来是跟着父元素走的,可以用来做小提示框的效果)

offsetLeft : 只读 相对于offsetParent的水平方向偏移量

scrollTop : 只读 指的是在滚动屏幕时,垂直方向上元素滚动了多少px

scrollleft : 只读 指的是在滚动屏幕时,水平方向上元素滚动了多少px

2, document位置属性的区别:

返回文档在窗口左上角水平和垂直方向滚动的像素:

window.pageXOffset

window.pageYOffset

也可以叫做:

document.documentElement.scrollLeft

document.documentElement.scrollTop

还可以叫做:

window.scrollX

window.scrollY

3,几个元素宽度高度属性的区别:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border+水平滚动条的宽度

offsetHeight = height + padding + border+垂直滚动条的宽度