overview
在element上有许多关于位置的属性,容易混淆,今天来稍微梳理一下
offset
一句话来理解就是,element在document中占用的位置
所以
offsetHeght = VISIBLE content & padding + border + scrollbar
offsetWidth也一样,可视的内容加上padding和border还有里面的scrollbar
如果理解了“element在document中占用的位置”这句话,那么offsetLeft和offsetTop也就很好理解,表示的就是element距离document的left和top,举个例子
<body>
<div class="block"></div>
</body>
body {
padding: 50px;
border: 20px solid;
margin: 20px;
}
.block {
width: 50px;
height: 50px;
border: 1px solid;
}
那么block的offsetLeft和offsetTop是多少呢
offsetLeft = 20 + 20 + 50
offsetTop也一样
在实际中offset的作用往往可以用来得到最近的相对布局元素和计算left和top
In most practical cases we can use offsetParent to get the nearest CSS-positioned ancestor. And offsetLeft/offsetTop provide x/y coordinates relative to it’s left-upper corner.
client
client可以简单理解为一个元素的可视区域,client可以分为两个部分,inside和outside
所以clientHeight表示的是element的inside部分,content + padding,不包括滚动条,clientLeft表示inside和outside的之间的距离,如果没有滚动条就是border,所以其实滚动条是算在inside和outside之间的距离上,而不是clientHeight的数值上
scroll
scroll表示滚动的区域
scrollHeight = ENTIRE content & padding (visible or not)
也就是整个内容和padding部分
scrollLeft和scrollTop表示的分别是scroll element距离left和top的滚动距离,注意这两个属性是可读可写的
实际使用中可以用来扩展滚动区域
// expand the element to the full content height
element.style.height = element.scrollHeight + 'px';
reference
Element.scrollTop
What is offsetHeight, clientHeight, scrollHeight?
Geometry