SYNCERのロゴ
アイキャッチ画像

HTMLElement.offsetLeft - 水平方向のオフセット距離

offsetLeftは、HTMLElementのプロパティです。包含要素(offsetParent)からの、水平方向のオフセット距離を返します。具体的には、包含要素のpadding-leftの左端から、要素のborder-leftの左端までの幅です。このプロパティは読み取り専用です。

概要

名前
offsetLeft
所属
HTMLElement
IDL
readonly attribute long offsetLeft;
仕様書
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetleft

説明

offsetParentとなる要素のpadding-leftの左端から、自身のborder-leftの左端までの距離を表すピクセル単位の数値。

チュートリアル

取得はできますが、代入はできません。次の場合、div#fugaのpadding-leftの左端から、p#hogeのborder-leftの左端までの距離を取得できます。

HTML

<div id="fuga">
	<p id="hoge">SYNCER</p>
</div>

CSS

div#fuga {
	position: relative ;
}

JavaScript

var element = document.getElementById( "hoge" ) ;
var a = element.offsetLeft ;

デモ

HTMLElement.offsetLeftを取得するデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#fuga {
	position: relative ;
	background-color: blue ;
	padding: 40px ;
	border: 1px solid #000 ;
}

div#hoge {
	position: absolute ;
	top: 20px ;
	left: 40px ;

	background-color: red ;
	width: 80px ;
	height: 40px ;
	line-height: 40px ;
	color: #fff ;
}
</style>
</head>
<body>
<div id="fuga">
	<div id="hoge">SYNCER</div>
</div>

<hr>
<script>
var element = document.getElementById( "hoge" ) ;

console.log( element.offsetLeft ) ;
document.body.appendChild( new Text( element.offsetLeft ) ) ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。