做效果有时需要知道 DOM 元素的尺寸,尺寸并不是简单的宽度和高度,
算不算 padding、border,😵 需不需要考虑内容的真实高度(用于内容滚动的情况),
都需要不同的计算,🧐 这里记录/学习原生属性和方法来获取各种尺寸。

包罗万象

console.dir(document.body)

DOM 元素属性解析
DOM 元素属性解析

clientHeight / clientWidth

包含 padding,不包含 border、margin、滚动条尺寸

clientHeight / clientWidth
clientHeight / clientWidth

offsetHeight / offsetWidth

包含 padding、border、滚动条尺寸,不包含 margin

offsetHeight / offsetWidth
offsetHeight / offsetWidth

scrollHeight / scrollWidth

此属性一般用于有滚动条的元素
返回滚动内容的总尺寸

scrollHeight / scrollWidth
scrollHeight / scrollWidth