【前端工程师手册】前端应该知道的各种宽高

引子

曾经校招面试的时候,学习了三个月前端的我去某厂面试,面试官循循善诱考察了一个开发中的实际场景,其中有需要用到某元素的高度,面试官问我clientHeight和offsetHeight的区别是什么,我当时一脸懵逼,这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来参加面试...

好汉不提当年囧,今天总结一下常见的元素各种宽高。

一些height和width

clientHeight和clientWidth

没有横向滚动条时:clientHeight = css设置的height + paddingTop + paddingBottom

有横向滚动条时:clientHeight = css设置的height + paddingTop + paddingBottom - 滚动条的高度

clientWidth类似,就不再赘述

ps:这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素为0

offsetHeight和offsetWidth

offsetHeight = ccss设置的height + paddingTop + paddingBottom + borderTop + borderBottom

offsetWidth类似,就不再赘述

scrollHeight和scrollWidth

无滚动条时:scrollHeight = clientHeight = css设置的height + paddingTop + paddingBottom

有滚动条时:scrollHeight = 实际内容的高度 + paddingTop + paddingBottom(即要算上因为滚动被遮住的内容高度

scrollWidth不再赘述

一些Top和Left

clientLeft和clientTop

clientTop = borderTop
clientLeft = borderLeft

offsetLeft和offsetTop

以offsetTop为例,搞懂它首先要明白offsetParent是什么

offsetParent是元素最近的有定位的父元素,如果父元素中没有有定位的,那么就是最近的 table, table cell 或根元素。

offsetTop 和 offsetLeft 都是相对于offsetParent内边距边界的。

scrollTop和scrollLeft

scrollTop即为向上滚动时,元素内容区被遮住的那一部分。

scrollLeft同理

参考

JavaScript 中的各种宽高属性

MDN

相关推荐