写一个方法获取div的宽高

有多种方法可以获取 div 的宽高，以下列出几种常见且推荐的使用方式，并解释了它们之间的区别：

1. 使用 offsetWidth 和 offsetHeight (推荐)

这是获取 div 完整宽高最常用的方法，它包含 padding、border 和水平滚动条（如果存在）。

function getDivDimensions(divElement) {
  const width = divElement.offsetWidth;
  const height = divElement.offsetHeight;
  return { width, height };
}

// 示例用法：
const myDiv = document.getElementById('myDiv');
const dimensions = getDivDimensions(myDiv);
console.log(dimensions); // 输出 { width: ..., height: ... }

2. 使用 clientWidth 和 clientHeight

这会获取 div 的内容区域的宽高，包含 padding，但不包含 border 和水平滚动条。

function getDivContentDimensions(divElement) {
  const width = divElement.clientWidth;
  const height = divElement.clientHeight;
  return { width, height };
}

3. 使用 getComputedStyle()

这个方法可以获取应用到 div 上的所有 CSS 样式，包括 width 和 height。需要注意的是，它返回的是字符串值，需要转换成数字。并且，如果样式是通过内联样式设置的，即使元素没有添加到DOM中，也能获取到样式。

function getDivStyleDimensions(divElement) {
  const styles = getComputedStyle(divElement);
  const width = parseFloat(styles.width); // 需要转换成数字
  const height = parseFloat(styles.height); // 需要转换成数字
  return { width, height };
}

4. 使用 getBoundingClientRect()

这个方法返回一个 DOMRect 对象，包含元素的大小和相对于视口的位置。它包含 padding 和 border，但不包含水平滚动条. 需要注意的是，getBoundingClientRect() 的值是相对于视口的，如果页面滚动，返回值会改变。

function getDivRectDimensions(divElement) {
  const rect = divElement.getBoundingClientRect();
  const width = rect.width;
  const height = rect.height;
  return { width, height };
}

如何选择合适的方法？