网页元素相对视口的距离：offset()和getBoundingClientRect()方法剖析！

2023-10-12 11:23:02

大家嚎啊，今天我们来聊聊网页元素相对视口的距离，也就是大家常说的offset()和getBoundingClientRect()方法，这两个方法可以帮我们精确地计算元素相对于视口的位置和大小。

偏移量offset()

offset()方法可以获取元素相对它最近的定位祖先（即父元素）的位置（也就是元素偏移量）。如果元素没有定位祖先，那么其偏移量相对于文档。

语法

offset() {
  top: number;
  left: number;
}

返回值

一个包含top和left属性的对象，表示元素相对于它最近的定位祖先的位置。

示例

const element = document.querySelector('.element');
const offset = element.offset();

console.log(`元素相对于它最近的定位祖先的偏移量为：`);
console.log(`top: ${offset.top}`);
console.log(`left: ${offset.left}`);

getBoundingClientRect()

getBoundingClientRect()方法获取元素相对于视口的位置和大小的矩形对象。

语法

getBoundingClientRect() {
  top: number;
  left: number;
  right: number;
  bottom: number;
  width: number;
  height: number;
}

返回值

一个包含top、left、right、bottom、width和height属性的对象，表示元素相对于视口的位置和大小。

示例

const element = document.querySelector('.element');
const rect = element.getBoundingClientRect();

console.log(`元素相对于视口的位置和大小为：`);
console.log(`top: ${rect.top}`);
console.log(`left: ${rect.left}`);
console.log(`right: ${rect.right}`);
console.log(`bottom: ${rect.bottom}`);
console.log(`width: ${rect.width}`);
console.log(`height: ${rect.height}`);

offset()与getBoundingClientRect()的区别

offset()获取元素相对于它最近的定位祖先的位置（偏移量），而getBoundingClientRect()获取元素相对于视口的位置和大小。
offset()返回一个包含top和left属性的对象，而getBoundingClientRect()返回一个包含top、left、right、bottom、width和height属性的对象。
offset()只计算元素的位置（偏移量），而不计算元素的大小，而getBoundingClientRect()计算元素的位置和大小。