HTMLElement.offsetLeft プロパティは読み取り専用で、現在の要素の左上隅HTMLElement.offsetParent ノード内の左へのオフセットをピクセル数を返します。

ブロックレベル要素では、 offsetTop, offsetLeft, offsetWidth, offsetHeightoffsetParent からの相対的な要素の境界ボックスを記述します。

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

構文

left = element.offsetLeft;

left は整数で、最も近くの相対配置された親要素からの左へのオフセットをピクセル数で表します。

var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;
 
if (tOLeft > 5) {
  // large left offset: do something here
}

この例は、 div 内で折り返す「長い」文を青い境界線で表示し、 span の境界を記述すると考えられるものを赤いボックスで表示します。

Image:offsetLeft.jpg

<div style="width: 300px; border-color:blue;
  border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="long">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>
  var box = document.getElementById("box");
  var long = document.getElementById("long");
  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = long.offsetTop + document.body.scrollTop + "px";
  box.style.width = long.offsetWidth + "px";
  box.style.height = long.offsetHeight + "px";
</script> 

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
offsetLeft の定義
草案  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
offsetLeft
実験的
Chrome 完全対応 47Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 11WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, SphinxKnight, momdo, fscholz, khalid32, Okome
最終更新者: mdnwebdocs-bot,