DOM

：

：

Element.clientLeft プロパティ

　編集：2022.09.20 by T.A.

[Edge]。読取専用。→

element が配置された場所からパディング領域までの距離を数値で返す。実質 element の左ボーダー幅に一致する？。

mdn： 要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロール バーがレンダリングされると垂直スクロール バーの幅を含みます。clientLeft は、左マージンまたは左パディングを含みません。

が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、垂直スクロールバーは左側に配置され、これが clientLeft の計算方法に影響します。

注： このプロパティは値を整数に丸めます。小数の値が必要な場合は、element.getBoundingClientRect() を使用してください。

注： 要素に display: inline が設定されている場合、境界の幅に関わらず clientLeft は 0 を返します。

構文
element.clientLeft
element Element。
値

ピクセル数を表す数値。

例

HTML： 

<DIV id=IdDiv style="
  margin:10px;
  border:20px solid #eee;
  padding:30px;
">DIV要素</DIV>
<TABLE style="
  border:5px solid #bbb;
  border-collapse:separate;
  border-spacing:5px;
">
  <TR><TD style="border:5px solid #ddd">TD要素
</TABLE>
<SPAN id=IdLog></SPAN>

JavaScript： これを組み込む。 

function Job(eve){  //イベント処理：
  let Y=eve.target; //イベントが起きた要素を取得。
  IdLog.innerText=Y.tagName +'：'+ Y.clientLeft; //表示：タグ名、clientLeft。
}
document.body.addEventListener('mousemove', Job); //ウインドウにマウス ポインターが動いたら発するイベント処理 Job を組み込む。
テスト