HTMLElement.offsetLeft
プロパティは読み取り専用で、現在の要素の左上隅が HTMLElement.offsetParent
ノード内の左へのオフセットをピクセル数を返します。
ブロックレベル要素では、 offsetTop
, offsetLeft
, offsetWidth
, offsetHeight
が offsetParent
からの相対的な要素の境界ボックスを記述します。
しかし、 (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 の境界を記述すると考えられるものを赤いボックスで表示します。
<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 の定義 |
草案 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。