HTMLElement：offsetLeft 属性

HTMLElement.offsetLeft 只读属性返回当前元素的左上角相对于HTMLElement.offsetParent 节点的水平偏移量（以像素为单位）。

对于块级元素，offsetTop、offsetLeft、offsetWidth 和 offsetHeight 描述了相对于 offsetParent 的元素边框盒。

但是，对于可以从一行换行到下一行的内联级元素（例如span），offsetTop 和 offsetLeft 描述了第一个边框盒的位置（使用Element.getClientRects() 获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述了边界边框盒的尺寸（使用Element.getBoundingClientRect() 获取其位置）。因此，一个具有 offsetLeft、offsetTop、offsetWidth 和 offsetHeight 左、上、宽和高的框不会是带有换行文本的 span 的边界框。

值

整数。

示例

js
const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // large left offset: do something here
}

此示例显示了一个在带有蓝色边框的 div 内换行的“长”句子，以及一个可能认为应该描述 span 边界范围的红色框。

A sentence that reads: Short span. This text is completely within a div with a blue border. A sentence that reads: Long span that wraps within this div. The words "long span that wraps" is within a box with a red border. The words "within this div" are within the div with the blue border.

html
<div
  style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="longspan">Long span that wraps within this div.</span>
</div>

<div
  id="box"
  style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div>

<script>
  const box = document.getElementById("box");
  const longspan = document.getElementById("longspan");
  box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
  box.style.width = longspan.offsetWidth + "px";
  box.style.height = longspan.offsetHeight + "px";
</script>

规范

规范
CSSOM 视图模块
# dom-htmlelement-offsetleft

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅