offset家族
offset 单词本身是偏移量的意思, JavaScript中有一套获取元素尺寸和位置的方法,就是通过offset家族来实现的。
offsetWidth和offsetHeight
得到对象自己的宽度和高度。这个高度和宽度是对象自己所占用的实际高度,包括padding和边框。
|
|
offsetLeft和offsetTop
返回距离上级盒子(带有定位)左边的位置。因为和定位有关所以没有offsetRight和offsetBottom。如果父级(所有上层容器)都没有定位则以body位置作为参考。
|
|
上面的div我们将body的默认距离去掉,发现div的offsetLeft和Top是div的margin距离。说明offsetLeft是div距离body的距离加上自身margin的距离,假如将body的padding设置为10则offsetLeft就是13px。
我们再试想,如果给定位父级加上margin,border呢?结果发现和margin和boder无关。
结论:实际上可以说是自己可见位置到父级定位元素的内边框距离。
clientWidth和clientHeight
clientWidth和offsetWidth的区别是clientWidth是不含border的内边框宽度。
如上图深色橙色区域是border, 白色区域则是clientWidth和offsetHeight。
scorllWidth和scrollHeight
scrollWidth和scrollHeight则是实际的文本内容所占宽高加上padding的距离。
scrollWidth = 文本宽度 + padding; scrollHeight = 实际文本高度 + padding;
style尺寸
我们可以通过style获得以下距离。
style.border : 获取边框宽度。 style.padding : 获取padding值。 style.margin: 获取margin值。