DOM

：

：

HTMLElement.offsetLeft プロパティ

　編集：2022.09.30 by T.A.

[Edge]。読取専用。→

element の左位置から HTMLElement.offsetParent の内容開始までの距離をピクセルを表す数値で返します。

mdn： 要素の左上隅が HTMLElement.offsetParent ノード内で左へオフセットされるピクセル数を返します。

ブロック レベル要素では、offsetTop、offsetLeft、offsetWidth、offsetHeight が offsetParent からの相対的な要素のボーダー ボックスを記述します¶。

しかし、（span などの）インラインレベル要素は行をまたいで折り返すことがあるので、offsetTop および offsetLeft は最初のボーダー ボックス（その幅と高さを取得するには Element.getClientRects() を使用）の位置を記述するのに対し、offsetWidth および offsetHeight は囲むボーダー ボックス（位置を取得するには Element.getBoundingClientRect() を使用）の寸法を記述します。したがって、offsetLeft、offsetTop、offsetWidth、offsetHeight による左、上、幅、高さは折り返されたテキストの区間を囲むボックスにはなりません。

構文
element.offsetLeft
element HTMLElement。
値

ピクセル数を表す数値。

例
mdnより

→

mouseover により情報表示

HTML： 

<DIV id=IdDiv style="border:10px solid #f00">DIV要素</DIV>
<BR>
<SPAN id=IdSpan style="border:10px solid #0f0">SPAN要素</SPAN><BR>
<BR>
<TABLE id=IdTable><TR><TD style="border:3px solid black; padding:10px;">
  <SPAN style="border:10px solid #0f0">SPAN要素</SPAN><BR>
</TABLE>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){
  let E=eve.target;
  IdLog.innerHTML=E.tagName +"／offsetParent＝"+ E.offsetParent.tagName +"：offsetLeft＝"+ E.offsetLeft;
}
IdDiv.onmouseover=Job;   //イベント割り当て。
IdSpan.onmouseover=Job;  //イベント割り当て。
IdTable.onmouseover=Job; //イベント割り当て。
テスト