最新のWeb開発のチュートリアル
 

Element offsetLeft Property

<Elementオブジェクト

offsetLeft位置取得<div>要素を:

<div id="test">
<p>Click the button to get offsetLeft for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>offsetLeft is: <span id="demo"></span></p>
</div>

<script>
function myFunction() {
    var testDiv = document.getElementById("test");
    document.getElementById("demo").innerHTML = testDiv.offsetLeft;
}
</script>
»それを自分で試してみてください

定義と使用法

offsetLeftプロパティは左位置返す(in pixels)左側offsetParentの要素に対して。

返された値が含まれています:

  • 要素の左の位置、およびマージン
  • offsetParentの要素の左パディング、スクロールバーと境界線

注: offsetParentのの要素が静的以外の位置を有する最も近い祖先です。

ヒント:使用して、要素のトップ位置を返すにoffsetTopのプロパティを。


ブラウザのサポート

プロパティ
offsetLeft はい 8.0 はい はい はい

構文

左のオフセット位置を返します:

object .offsetLeft

技術的な詳細

デフォルト値: デフォルト値なし
戻り値: ピクセル要素の左の位置を表す番号、
DOMバージョン: CSSOM

その他の例

AAの位置取得<div>要素を:

<div id="test">
<p>Click the button to get the left and top offsets for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p id="demo">offsetLeft: <br>offsetTop: </p>
</div>
<script>
function myFunction() {
    var testDiv = document.getElementById("test");
    var demoDiv = document.getElementById("demo");
    demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>
»それを自分で試してみてください


<Elementオブジェクト