js获取元素width和height

1. getBoundingClientRect：该方法返回元素的大小及其相对于视口的位置

   1. 语法：Element.getBoundingClientRect()

   2. 使用：

      1. 获取宽度：Element.getBoundingClientRect().width
      2. 获取高度：Element.getBoundingClientRect().height

   3. 范围：content+padding+border

   4. 是否支持小数点：支持

---

2. getComputedStyle：方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
   1. 语法：window.getComputedStyle(``_element,_ [_pseudoElt_]);
      1. 参数说明：
         1. **element：**用于获取计算样式的[element](https://developer.mozilla.org/zh-CN/docs/Web/API/Element)。
         2. **pseudoElt(可选)：**指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。
      2. 返回值：返回一个实时的 [CSSStyleDeclaration](https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration) 对象，当元素的样式更改时，它会自动更新本身。
   2. 使用：
      1. 获取宽度：window.getComputedStyle(element).width
      2. 获取高度：window.getComputedStyle(element).height
   3. 范围：content
   4. 是否支持小数点：支持
   5. 注意：该结果会返回px单位

---

3. clientWidth和clientHeight: 获取表示元素的内部宽度
   1. 语法：element.clientWidth
   2. 使用：
      1. 获取宽度：element.clientWidth
      2. 获取高度：element.clientHeight
   3. 范围：content+padding-滚动条宽度(如果有)
   4. 是否支持小数点：不支持（四舍五入为整数）

---

4. offsetWidth和offsetHeight: 返回一个元素的布局宽度
   1. 语法：element.offsetWidth
   2. 使用：
      1. 获取宽度：element.offsetWidth
      2. 获取高度：element.offsetHeight
   3. 范围：content+padding+border
   4. 是否支持小数点：不支持（四舍五入为整数）

---

5. scrollWidth和scrollHeight：元素内容宽高的一种度量，包括由于overflow溢出而在屏幕上不可见的内容
   1. 语法：element.scrollWidth
   2. 使用：
      1. 获取宽度：element.scrollWidth
      2. 获取高度：element.scrollHeight
   3. 范围：content（实际内容）+padding
   4. 是否支持小数点：不支持（四舍五入为整数）