JavaScript DOM元素尺寸和位置

在前端开发过程中，我们经常需要获取DOM元素的尺寸和位置信息，以便于进行布局、计算和渲染等操作。 JavaScript提供了一些常用的方法和属性来获取DOM元素的尺寸和位置信息，如clientWidth/clientHeight、offsetWidth/offsetHeight、getBoundingClientRect()等。

clientWidth/clientHeight

clientWidth和clientHeight属性分别表示元素的内部宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。

示例代码：

<div id="box" style="width:100px;height:100px;border:1px solid #000;padding:10px;margin:20px;">
  box
</div>

const box = document.getElementById('box');
console.log(box.clientWidth, box.clientHeight); // 输出 100 100

offsetWidth/offsetHeight

offsetWidth和offsetHeight属性分别表示元素的外部宽度和高度，包括边框（border）、内边距（padding）和滚动条（如果存在）的宽度。

示例代码：

<div id="box" style="width:100px;height:100px;border:1px solid #000;padding:10px;overflow:auto;">
  <p style="width:200px;height:200px;"></p>
</div>

const box = document.getElementById('box');
console.log(box.offsetWidth, box.offsetHeight); // 输出 142 142

getBoundingClientRect()

getBoundingClientRect()方法返回一个矩形对象，用于获取元素相对于视口的尺寸和位置信息。该对象具有4个属性：left、top、right、bottom，分别表示元素的左、上、右、下边界相对于视口的坐标。此外，该对象还有width和height属性，分别表示元素的宽度和高度。

示例代码：

<div id="box" style="width:100px;height:100px;border:1px solid #000;">
  box
</div>

const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log(rect.left, rect.top, rect.right, rect.bottom, rect.width, rect.height); // 输出 0 0 102 102 100 100

结语

在实际开发中，根据实际场景和需求选择合适的方法和属性来获取DOM元素的尺寸和位置信息，以便于实现我们所需要的功能和效果。