关于元素的尺寸(dimensions) 说明

在以往我都是对这些属性死记硬背,很少真正理解过,忘记了就查手册。看完本文我相信这种情况就不会再发生了。 元素占据的物理空间的尺寸 如果你需要获得元素占据的物理空间,那么使用offsetHeight和offsetWidth。 自然而然此物理空间必然包含的有:padding、滚动条、border。这两个属性与getBoundingClientRect()的height和width属性是一致的。 为了帮助理解请看下图: 元素内容的可视区域的尺寸 可视区域包含padding,但是不包含border、滚动条。此时请使用clientHeight和clientWidth。 为了帮助理解请看下图: 元素全部