element.offsetLeftプロパティ

element.offsetLeftは、「element」に指定した要素の水平方向のオフセットを返すプロパティ。

具体的には、element.offsetParentプロパティで得られる要素から「element」に指定した要素の左端までの距離。

構文

var $offsetLeft = $elementNodeReference.offsetLeft;

戻り値

指定した要素の水平方向のオフセット。単位は、ピクセル。

サンプル

水平方向のオフセット:

サンプルの動作について

「getOffsetLeft()」ボタンをクリックすると、「水平方向のオフセット:」の右横に「40px」と表示する。

「40px」は、id属性が「sampleWrap」である赤いボックス要素のCSSの「padding: 10px;」と、id属性が「sample」である枠線がグレーのボックス要素のCSS「margin: 20px 30px;」で指定した左のマージン「30px」を足した数値。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function getOffsetLeft() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $offsetLeft = $elementNodeReference.offsetLeft;
 document.getElementById( "sampleOutput1" ).innerHTML = $offsetLeft + "px";
}
</script>

CSS

<style type="text/css">
#sampleWrap{
 position: relative;
 padding: 10px;
 background-color: red;
}
#sample{
 height: 100px;
 width: 300px;
 padding: 10px;
 margin: 20px 30px;
 background-color: #fffee7;
 border: 5px solid #dddddd;
 border-radius: 5px;
}
</style>

HTML

<div id="sampleWrap">
 <div id="sample">
  <button onclick="getOffsetLeft();">getOffsetLeft()</button>
  <p>水平方向のオフセット:<span id="sampleOutput1"></span></p>
 </div>
</div>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク