JS 中的偏移量 - Javascript

在 JavaScript 中，偏移量 (offset) 是相对于某个元素或者容器左上角的水平和垂直距离。我们可以使用偏移量来计算元素的位置或者在元素内选择特定的区域。JavaScript 提供了一些方法来获取元素的偏移量。

获取元素偏移量

offsetTop 和 offsetLeft

const element = document.getElementById('example');
console.log(element.offsetTop);    // 输出元素顶部和相对于父元素的顶部距离
console.log(element.offsetLeft);   // 输出元素左侧和相对于父元素的左侧距离

使用 offsetTop 和 offsetLeft 方法，我们可以获取元素相对于它的父元素的顶部和左侧距离。

offsetWidth 和 offsetHeight

const element = document.getElementById('example');
console.log(element.offsetWidth);    // 输出元素的宽度，包括 padding 和 border
console.log(element.offsetHeight);   // 输出元素的高度，包括 padding 和 border

使用 offsetWidth 和 offsetHeight 方法，我们可以获取元素的宽度和高度，包括 padding 和 border。

offsetParent

const element = document.getElementById('example');
console.log(element.offsetParent);    // 输出元素的父级元素，可能是文档的根元素或者一个包含元素

使用 offsetParent 方法，我们可以获取元素的父级元素。如果元素相对于根元素定位，那么它的 offsetParent 值可能是 null。

计算偏移量

getBoundingClientRect()

const element = document.getElementById('example');
const rect = element.getBoundingClientRect();
console.log(rect.top);      // 输出元素顶部和 viewport 左上角的距离
console.log(rect.left);     // 输出元素左侧和 viewport 左上角的距离
console.log(rect.width);    // 输出元素的宽度，包括 padding 和 border
console.log(rect.height);   // 输出元素的高度，包括 padding 和 border

使用 getBoundingClientRect() 方法，我们可以获取元素相对于 viewport 左上角的位置和大小。这个方法返回一个包含 top、left、right、bottom、width、height 属性的 DOMRect 对象。

计算元素的偏移量

function getOffsets(element) {
  let top = 0;
  let left = 0;
  while (element) {
    top += element.offsetTop - element.scrollTop;
    left += element.offsetLeft - element.scrollLeft;
    element = element.offsetParent;
  }
  return { top, left };
}

const element = document.getElementById('example');
const { top, left } = getOffsets(element);
console.log(top);   // 输出元素顶部和文档的顶部距离
console.log(left);  // 输出元素左侧和文档的左侧距离

使用上面的代码，我们可以计算元素相对于文档顶部和左侧的位置。其中，element.scrollTop 和 element.scrollLeft 是元素的滚动距离，我们需要将它们从 offsetTop 和 offsetLeft 的值中减去。通过持续获取元素的 offsetParent 值，我们可以递归计算元素相对于文档顶部和左侧的位置。