网络API：DOMRect 左属性

简介

DOMRect 对象表示一个矩形区域。其包含了元素在页面上所占据的位置和大小信息。其中，left 属性表示矩形左边缘距离视口左边缘的像素数。

使用方法

获取元素的 DOMRect 对象

我们可以使用 getBoundingClientRect 方法获取元素的 DOMRect 对象，例如：

const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();

其中，rect 即为获取到的 DOMRect 对象。

使用 left 属性

我们可以通过访问 DOMRect 对象的 left 属性来获取元素矩形的左边缘距离视口左边缘的像素数：

const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();

console.log(`该元素的左边缘距离视口左边缘 ${rect.left}px`);

示例

一个具体的示例场景为：我们需要在元素的左边缘距离视口左边缘超过 100 像素时，将元素隐藏。代码如下：

window.addEventListener('scroll', () => {
  const element = document.getElementById('my-element');
  const rect = element.getBoundingClientRect();

  if (rect.left > 100) {
    element.style.display = 'none';
  } else {
    element.style.display = 'block';
  }
});

总结

left 属性是 DOMRect 对象中一个十分有用的属性，可以方便地获取元素矩形的左边缘距离视口左边缘的像素数，帮助我们在开发中更加灵活地控制元素的位置和显示。