HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM offsetLeftプロパティとは？使い方をサンプルコード付きで解説

HTML DOM offsetLeftプロパティとは

HTML DOMのoffsetLeftプロパティは、指定した要素の左端が親要素の左側からどのくらいの位置にあるかを表す数値を返します。戻り値はピクセル（px）単位の整数値です。

このプロパティは、要素の配置計算やドラッグ＆ドロップ機能の実装など、正確な位置情報が必要となる場面で非常に役立ちます。

構文

構文は以下の通りです。

HTMLelement.offsetLeft

offsetLeftが返す値には、次のものが含まれます。

  • 指定した要素自体の左位置とマージン（margin）
  • 親要素の左パディング（padding）、スクロールバー、ボーダー（border）、マージン（margin）

なお、類似のプロパティとして上方向の位置を返すoffsetTopがあり、さらにgetBoundingClientRect()メソッドを使えば、ビューポート（表示領域）を基準としたより詳細な座標情報を取得することも可能です。

offsetLeftプロパティの使用例

ここでは、フォーム要素のoffsetLeftの値を取得し、関連するCSSスタイルの値とあわせて画面に表示する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetLeft</title>
<style type="text/css">
    #picForm {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #containerDiv {
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form id="picForm">
        <fieldset>
            <legend>HTML-DOM-offsetLeft</legend>
            <div id="containerDiv">
                <img id="image" src="https://www.tutorialspoint.com/ios/images/ios-mini-logo.jpg">
            </div>
            <input type="button" onclick="getLeft()" value="Get offsetLeft">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var picForm = document.getElementById("picForm");
    var containerDiv = document.getElementById("containerDiv");
    function getLeft() {
        // window.getComputedStyle()で計算済みのCSSスタイルを取得
        var style = window.getComputedStyle(picForm);
        var style2 = window.getComputedStyle(document.body);
        divDisplay.innerHTML = 'Left Offset of form: '+picForm.offsetLeft+'px';
        divDisplay.innerHTML += '<br>Left position of Child(form): '+style.left;
        divDisplay.innerHTML += '<br>Left margin of Child(form): '+style.marginLeft;
        divDisplay.innerHTML += '<br>Left padding of Parent(body): '+style2.paddingLeft;
        divDisplay.innerHTML += '<br>Left border of Parent(body): '+style2.borderLeftWidth;
        divDisplay.innerHTML += '<br>Left margin of Parent(body): '+style2.marginLeft;
}
</script>
</body>
</html>

実行結果

まず、ボタンをクリックする前の画面は以下の通りです。

HTML DOM offsetLeftプロパティとは？使い方をサンプルコード付きで解説

続いて、「Get offsetLeft」ボタンをクリックした後の画面です。

HTML DOM offsetLeftプロパティとは？使い方をサンプルコード付きで解説

このように、offsetLeftの値には要素自身のマージンだけでなく、親要素のパディングやボーダーの幅なども含まれていることが確認できます。位置関係を正しく把握したい場合は、これらのスタイル値との違いを意識しておくことが重要です。

  1. HTML DOM offsetLeftプロパティとは？使い方をサンプルコード付きで解説

    HTML DOM offsetLeftプロパティとは HTML DOMのoffsetLeftプロパティは、指定した要素の左端が親要素の左側からどのくらいの位置にあるかを表す数値を返します。戻り値はピクセル（px）単位の整数値です。 このプロパティは、要素の配置計算やドラッグ＆ドロップ機能の実装など、正確な位置情報が必要となる場面で非常に役立ちます。 構文 構文は以下の通りです。 HTMLelement.offsetLeft offsetLeftが返す値には、次のものが含まれます。 指定した要素自体の左位置とマージン（margin） 親要素の左パディング（padding）、スクロールバー、ボー

  2. HTML DOM Video textTracksプロパティの使い方をわかりやすく解説

    HTML DOM の Video textTracks プロパティは、<video> 要素に関連付けられたテキストトラック（字幕やキャプションなど）の情報を格納した TextTrackList オブジェクトを返します。このプロパティを利用すると、JavaScript から動画に設定された字幕トラックの総数やラベル、言語などの情報を簡単に取得できます。 構文 textTracks プロパティの基本的な構文は以下の通りです。 mediaObject.textTracks 戻り値は TextTrackList オブジェクトであり、length プロパティでトラックの総数を取得したり、イン