DOM元素尺寸和位置相关的属性(clientWidth、offsetWidth、scrollWidth...)总结

初衷

由于DOM元素位置和大小的属性这块和鼠标事件的知识点容易混淆，所以需要单独总结一下，又不想把截图存到本地，所以就有了这篇文章。如果有什么地方写的不对，还请私信或留言给我扶正! 谢谢。

为了方便演示，先写一些基本的代码

html

<div><div>

css

/* 先把 body 的 8px margin 干掉,看着太难受了 */
body {
   
  margin: 0;
}

div {
   
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid #000;
  background-color: hotpink;
  margin: 100px auto;
}

js

// 先拿到这个元素
var div = document.querySelector('div')

clientWidth、clientHeight

该属性表示计算元素内部的宽度和高度，包括内边距(padding)

console.log(div.clientWidth, div.clientHeight);

输出的结果为

如果内容超出了，元素出现了滚动条，