指定した要素のページ内での位置(絶対位置)を取得する - JavaScript

JavaScriptで指定した要素のページ内での位置を取得するコードを紹介します。

概要

JavaScriptで要素の位置を取得するには、getElementById() メソッドなどで要素のオブジェクトを取得し、getBoundingClientRect() メソッドを呼び出すと位置を取得できます。ただし、getBoundingClientRect() メソッドで取得できる位置はスクロールを考慮しないスクリーン上の位置のため、スクロール量であるwindow.pageXOffset, window.pageYOffset を加算してページ内での位置を求めます。

プログラム例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      <!--
      .frame {
        height:120px;
        border:1px solid #0094ff;
      }
      -->
    </style>
    <script type="text/javascript">
      
      function onButtonClick() {
        var textbox =  document.getElementById('TextArea1');
        var elem = document.getElementById('frame1');
        var rect = elem.getBoundingClientRect();
        var elemtop = rect.top + window.pageYOffset;
        var elemleft = rect.left + window.pageXOffset;
        var elembottom = rect.bottom + window.pageYOffset;
        var elemright = rect.right + window.pageXOffset;
        textbox.value = 'top:' + elemtop+'\r\n'; 
        textbox.value += 'left:' + elemleft+'\r\n'; 
        textbox.value += 'bottom:' + elembottom +'\r\n'; 
        textbox.value += 'right:' + elemright+'\r\n'; 
      }
    </script>
</head>
<body>
  <div>Position Demo</div>
  <div><textarea id="TextArea1" rows="16" cols="80"></textarea></div>
  <div><input id="Button1" type="button" value="button" onclick="onButtonClick();" /></div>
  <div id="frame1" class="frame">frame1</div>
  <div id="frame2" class="frame">frame2</div>
  <div id="frame3" class="frame">frame3</div>
  <div id="frame4" class="frame">frame4</div>
  <div id="frame5" class="frame">frame5</div>
</body>
</html>

解説

下記のコードで textareaタグの要素と、"frame1" のIDを持つ要素を取得します。
"frame1"の要素に対して、getBoundingClientRect()メソッドを呼び出し、frame1の要素の位置座標を取得します。

  var textbox =  document.getElementById('TextArea1');

  var elem = document.getElementById('frame1');
  var rect = elem.getBoundingClientRect();

getBoundingClientRect()メソッドで取得した座標値はスクロールを考慮しない値のため、縦方向の座標には window.pageYOffsetの値を加算します。横宝庫の値には window.pageYOffset の値を加算します。加算した値をTextAreaに表示します。~

  var elemtop = rect.top + window.pageYOffset;
  var elemleft = rect.left + window.pageXOffset;
  var elembotom = rect.bottom + window.pageYOffset;
  var elemright = rect.right + window.pageXOffset;

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

[button]をクリックします。テキストボックスに"frame1" の座標値が表示されます。

続いて、ページを下方向にスクロールします。スクロール後に[button]をクリックします。

ページの上部に戻ります。スクロールする前と同じ値が表示されており、スクロール量を考慮したページ内での絶対座標が取得できていることが確認できました。

指定した要素のページ内での絶対座標が取得できました。

プログラム例 (枠がネストする場合)

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      <!--
      #outerframe{
        border: 1px solid #ad1a1a;
        margin-top:16px;
        margin-left:16px;
        padding-top:32px;
        padding-left:16px;
      }
      .frame {
        height:120px;
        border:1px solid #0094ff;
      }
      -->
    </style>
    <script type="text/javascript">
      
      function onButtonClick() {
        var textbox =  document.getElementById('TextArea1');
        var elem = document.getElementById('frame1');
        var rect = elem.getBoundingClientRect();
        var elemtop = rect.top + window.pageYOffset;
        var elemleft = rect.left + window.pageXOffset;
        var elembottom = rect.bottom + window.pageYOffset;
        var elemright = rect.right + window.pageXOffset;
        textbox.value = 'top:' + elemtop+'\r\n'; 
        textbox.value += 'left:' + elemleft+'\r\n'; 
        textbox.value += 'bottom:' + elembottom+'\r\n'; 
        textbox.value += 'right:' + elemright+'\r\n'; 

      }
    </script>
</head>
<body>
    <div>Position Demo</div>
    <div><textarea id="TextArea1" rows="16" cols="80"></textarea></div>
    <div><input id="Button1" type="button" value="button" onclick="onButtonClick();" /></div>
    <div id="outerframe">
        <div id="frame1" class="frame">frame1</div>
        <div id="frame2" class="frame">frame2</div>
        <div id="frame3" class="frame">frame3</div>
        <div id="frame4" class="frame">frame4</div>
        <div id="frame5" class="frame">frame5</div>
    </div>
</body>
</html>