offset*与client*(+)

2016-05-19  本文已影响41人  前端历险记

做组件中,遇到过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

上一篇下一篇

猜你喜欢

热点阅读