Element.offsetLeft- オフセットの横幅を取得する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのoffsetLeftはオフセットの横幅を取得するプロパティです。

説明

offsetLeftプロパティはオフセットの横幅を表します。具体的には、offsetParentとなる要素のpaddingの左端部分から、その要素のborderの左端部分までの幅です。offsetParentのborderが含まれない点にご注意下さい。

例えば上記を見て下さい。茶色の枠線の要素(茶色い要素)が、青色の枠線の要素(青い要素)のoffsetParentだと仮定します。この時、青い要素のoffsetLeftは、茶色い要素の、borderを含めない左端から、青い要素のborderの左端までの幅となります。

なお、勘違いする人が多いですが、offsetParentはその要素の親要素、ではありません。詳しくはoffsetParentプロパティの説明をご参考下さい。

サンプルコード

<div class="parent">
	<div id="target">目的の要素</div>
</div>
.parent {
	position: relative ;
}
// div要素を取得
var divElement = document.getElementById( "target" ) ;

// offsetLeftを取得
var offsetLeft = divElement.offsetLeft ;

デモ

id属性がtargetのdiv要素の、offsetLeftを取得して表示します。数値がどことどこの数値の合計か考えてみて下さい。

構文

readonly long offsetLeft = Element.offsetLeft

返り値

項目説明
offsetLeftoffsetParentのpaddingの左端から、対象要素のborderの左端までの幅。

関連項目