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

【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

offsetParentプロパティとは

HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。

具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準になる点も覚えておくと便利です。

なお、要素が非表示（display: none）になっている場合や、要素自身が <body>・<html> である場合には null が返されるため、実装時には注意が必要です。

構文

offsetParent プロパティは、以下のように記述することで参照できます。

HTMLElement.offsetParent

サンプルコード

次の例では、ボタンをクリックすると画像フォーム（picForm）の offsetParent を取得し、その結果を画面上に表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetParent</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-offsetParent</legend>
         <div id="containerDiv">
            <img id="image" src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
         </div>
         <input type="button" onclick="getParent()" value="Get offsetParent">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var picForm = document.getElementById("picForm");
   var containerDiv = document.getElementById("containerDiv");
   function getParent() {
      divDisplay.textContent = 'Offset for Image form is referenced from: '+picForm.offsetParent;
   }
</script>
</body>
</html>

実行結果

ボタンをクリックする前の画面は以下のとおりです。

【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

「Get offsetParent」ボタンをクリックすると、画像フォームのオフセットがどの親要素を基準に定義されているかが表示されます。

【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

まとめ

  • offsetParent は、要素のオフセット計算の基準となる親要素への参照を返すプロパティである
  • position が指定された最も近い祖先要素、テーブル関連要素、または body 要素が基準となる
  • 要素が非表示の場合や、body・html 自身に対しては null を返す
  1. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使