offset*与client*(+)
做组件中,遇到过offset与client相关的属性,发现即便是标准浏览器(如chrome),也未必能按照一种大众心理上默认的样式展现。那么就翻开来,揉烂了,慢慢了解。
另外就是从CSDN一篇文章,发现老图,文字部分都是错误的,不被人害,不害别人,自己动手排查一遍
offset,client字面含义
client
客户
offset
弥补,补偿
结合我们下边要说到的,不如这么理解
客户client
委托施工队建一座房子,你懂得,结果施工队偷工减料,被客户发现了,于是要offset
补偿一点,送个冰箱什么的家电。所以这就好理解了:
client
不包含边距和border(不带家电)
offset
包含边距和border(带家电)
offsetParent
MDN解释的很清楚
The **HTMLElement.offsetParent
** read-only property returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest table cell or root element (html
in standards compliant mode; body
in quirks rendering mode) is the offsetParent
. offsetParent
returns null when the element has style.display
set to "none". The offsetParent
is useful because offsetTop
and offsetLeft
are relative to its padding edge.
白话:如果最近的父元素中有用了position
定位的,那offsetParent
就是父元素。如没有,在标准模式下,offsetParent是html
.在严格模式下,offsetParent是body
scrollTop
很好理解:被卷上去的高度,实测:
FF需要使用document.documentElement.scrollTop
Chrome使用document.body.scrollTop
不信,你试试?
属性慢慢挖坑测
scrollHeight:
scrollLeft:
scrollTop:
scrollWidth:
offsetHeight:
offsetLeft:
offsetTop:
event.clientX
event.clientY
event.offsetX
event.offsetY
document.documentElement.scrollTop
event.clientX+document.documentElement.scrollTop