Open gogoend opened 4 years ago
事实上笔者一直对DOM元素中各个元素的各种尺寸充满疑惑,有时候傻傻自己分不清元素的offset / scroll / client / getBoundingClientRect() 位置与尺寸。因此本文将尝试对这些属性的了解进行实践。
接下来放开注释掉的样式:
height: 200px; overflow: auto;
overflow
此时,容器出现了一个垂直滚动条,占用了一部分容器宽度,因此$0.clientWidth、$0.scrollWidth值略有缩小,为原来的宽度 - 滚动条宽度。
$0.clientWidth
$0.scrollWidth
原来的宽度 - 滚动条宽度
继续放开注释掉的样式:
border: 4px solid #f00;
事实上笔者一直对DOM元素中各个元素的各种尺寸充满疑惑,有时候傻傻自己分不清元素的offset / scroll / client / getBoundingClientRect() 位置与尺寸。因此本文将尝试对这些属性的了解进行实践。
接下来放开注释掉的样式:
overflow
值使得容器可以滚动。 再次输出:此时,容器出现了一个垂直滚动条,占用了一部分容器宽度,因此
$0.clientWidth
、$0.scrollWidth
值略有缩小,为原来的宽度 - 滚动条宽度
。继续放开注释掉的样式: