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

引子

曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我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