HTML | DOM offsetLeft 属性

介绍

offsetLeft 属性返回指定元素相对于父元素的左边偏移量，以像素值表示。该属性是只读的。

这个属性用于获取元素相对于父元素的水平偏移量。如果父元素是相对定位的或绝对定位的，则 offsetLeft 表示元素的左外边距边缘与父元素的左内边距边缘之间的距离。

语法

element.offsetLeft

返回值

返回一个整数，表示元素相对于父元素的左边偏移量（以像素为单位）。

示例

假设有以下 HTML 元素和 CSS 样式：

<div id="parent" style="position: relative; border: 1px solid black; padding: 10px;">
  <div id="child" style="position: absolute; left: 20px;">Hello World!</div>
</div>

JavaScript 代码示例：

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

console.log(child.offsetLeft); // 输出结果: 20

注意事项

• 如果元素的 position 属性为 fixed，则 offsetLeft 返回相对于浏览器窗口的左边偏移量。
• 如果元素的 position 属性为 static，则 offsetLeft 返回相对于父元素的左边内边框边缘的偏移量。
• offsetLeft 属性不包括元素的左边框宽度。

参考链接

• MDN web docs: HTMLElement.offsetLeft