Js中的getBoundingClientRect

  const rect = document.querySelector('class名').getBoundingClientRect()

获取元素位置和尺寸

• x：元素左边界相对于视口的 x 坐标。
• y：元素上边界相对于视口的 y 坐标。
• width：元素的宽度。
• height：元素的高度。
• top：元素上边界相对于视口顶部的距离。
• right：元素右边界相对于视口左侧的距离。
• bottom：元素下边界相对于视口顶部的距离。
• left：元素左边界相对于视口左侧的距离。

const box = document.getElementById('box');
const rect = box.getBoundingClientRect();

console.log(rect.x);        // 元素左边界相对于视口的 x 坐标
console.log(rect.y);        // 元素上边界相对于视口的 y 坐标
console.log(rect.width);    // 元素的宽度
console.log(rect.height);   // 元素的高度
console.log(rect.top);      // 元素上边界相对于视口顶部的距离
console.log(rect.right);    // 元素右边界相对于视口左侧的距离
console.log(rect.bottom);   // 元素下边界相对于视口顶部的距离
console.log(rect.left);     // 元素左边界相对于视口左侧的距离