在JavaScript中获取元素宽高：几种常用方法及其应用场景

1. offsetWidth 和 offsetHeight

适用场景： 获取元素的边框盒（border-box）宽高，包括元素的内边距（padding）、边框（border）和内容（content）。

计算方式：

const element = document.getElementById("element");
const width = element.offsetWidth;
const height = element.offsetHeight;

示例：

<div id="element" style="width: 200px; height: 100px; padding: 10px; border: 1px solid black;">
  内容
</div>

const element = document.getElementById("element");
console.log(element.offsetWidth); // 输出：220
console.log(element.offsetHeight); // 输出：120

注意事项：

• 对于具有复杂布局的元素，例如浮动或绝对定位的元素，offsetWidth和offsetHeight可能不准确。

2. clientWidth 和 clientHeight

适用场景： 获取元素的内容盒（content-box）宽高，包括元素的内边距（padding）和内容（content）。

计算方式：

const element = document.getElementById("element");
const width = element.clientWidth;
const height = element.clientHeight;

示例：

<div id="element" style="width: 200px; height: 100px; padding: 10px;">
  内容
</div>

const element = document.getElementById("element");
console.log(element.clientWidth); // 输出：180
console.log(element.clientHeight); // 输出：80

注意事项：

• clientWidth和clientHeight不包括元素的边框（border）。

3. getBoundingClientRect()

适用场景： 获取元素的边界框（bounding box）宽高，包括元素的内边距（padding）、边框（border）和内容（content），但不包括滚动条。

计算方式：

const element = document.getElementById("element");
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;

示例：

<div id="element" style="width: 200px; height: 100px; padding: 10px; border: 1px solid black;">
  内容
</div>

const element = document.getElementById("element");
const rect = element.getBoundingClientRect();
console.log(rect.width); // 输出：220
console.log(rect.height); // 输出：120

注意事项：

• getBoundingClientRect()返回的是一个DOMRect对象，该对象包含元素的边界框的详细信息，包括top、left、bottom、right、width和height属性。

4. scrollWidth 和 scrollHeight

适用场景： 获取元素的可滚动内容的宽高，包括元素的内容（content）和滚动条。

计算方式：

const element = document.getElementById("element");
const width = element.scrollWidth;
const height = element.scrollHeight;

示例：

<div id="element" style="width: 200px; height: 100px; overflow: scroll;">
  <p>大量内容...</p>
</div>

const element = document.getElementById("element");
console.log(element.scrollWidth); // 输出：400
console.log(element.scrollHeight); // 输出：600

注意事项：

• scrollWidth和scrollHeight仅适用于具有滚动条的元素。对于没有滚动条的元素，scrollWidth和scrollHeight将与clientWidth和clientHeight相同。