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+垂直滚动条的宽度