CSS 中的 offsetX 和 offsetY

在 CSS 中，offsetX 和 offsetY 是用于获取元素相对于父元素的内边距框左上角的坐标偏移量的属性。这两个属性是以像素为单位的整数值，可用于定位元素或计算元素之间的相对位置。

offset 属性

offsetX 和 offsetY 属性是 HTMLElement 对象的可读属性，用于获取元素的水平和垂直偏移量。

const element = document.getElementById("myElement");
const offsetX = element.offsetLeft;     // 获取元素相对于父元素的左侧偏移量
const offsetY = element.offsetTop;      // 获取元素相对于父元素的顶部偏移量

offsetParent 属性

元素的 offsetParent 属性用于获取元素的最近的具有定位（positioned）祖先元素。这是因为 offsetX 和 offsetY 是相对于 offsetParent 元素的内边距框左上角坐标而言的。

const element = document.getElementById("myElement");
const offsetParent = element.offsetParent;     // 获取元素的偏移父元素

示例

假设有一个父元素 div，它的 CSS 样式如下：

div {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 20px;
}

在这个父元素中有一个子元素 span，它的 CSS 样式如下：

span {
  position: absolute;
  left: 50px;
  top: 50px;
}

现在我们可以使用 offsetX 和 offsetY 来计算子元素相对于父元素内边距框左上角的偏移量。

const parent = document.getElementById("parent");
const child = document.getElementById("child");

const offsetX = child.offsetLeft;
const offsetY = child.offsetTop;

console.log(`子元素相对于父元素的偏移量为：${offsetX}px, ${offsetY}px`);

上述代码的输出将是：子元素相对于父元素的偏移量为：50px, 50px

结论

通过使用 offsetX 和 offsetY 属性，我们可以轻松地获取元素相对于其父元素的位置偏移量。这对于定位元素或计算元素之间的相对位置非常有用。请记住，这些属性是相对于元素的 offsetParent 元素的内边距框左上角坐标而言的。