iPentec.com / Doc / JavaScript

指定した要素のウィンドウ内の座標値を取得する - JavaScript

JavaScriptで指定した要素のウィンドウ内での座標値を取得するコードを紹介します。

概要

JavaScriptで要素のウィンドウの座標値を取得するには、getBoundingClientRect() メソッドを呼び出すと位置を取得できます。取得する対象の要素はgetElementById() メソッドなどでオブジェクトを取得します。

補足

画面がスクロールされた場合の座標値を考慮した絶対座標を取得するにはこちらの記事を参照してください。

書式

[]は任意の変数、またはオブジェクト

var [rect] = [element].getBoundingClientRect();

または

var [top] = [element].getBoundingClientRect().top;
var [left] = [element].getBoundingClientRect().left;
var [bottom] = [element].getBoundingClientRect().bottom;
var [right] = [element].getBoundingClientRect().right;

プログラム例

コード

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

<!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();
        textbox.value = 'top:' + rect.top+'\r\n'; 
        textbox.value += 'left:' + rect.left+'\r\n'; 
        textbox.value += 'bottom:' + rect.bottom+'\r\n'; 
        textbox.value += 'right:' + rect.right+'\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>

解説

ボタンのクリックにより、onButtonClick() 巻数が呼び出されます。
下記のコードで、メッセージを出力するためのTextAreaタグのオブジェクトを取得します。

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

getElementById メソッドを呼び出し要素を取得します。今回は "frame1" の要素を取得します。取得したオブジェクトの getBoundingClientRect() メソッドを呼び出し、"frame1"の要素の座標値を取得します。

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

取得した値をテキストボックスに表示します。

  textbox.value = 'top:' + rect.top+'\r\n'; 
  textbox.value += 'left:' + rect.left+'\r\n'; 
  textbox.value += 'bottom:' + rect.bottom+'\r\n'; 
  textbox.value += 'right:' + rect.right+'\r\n';

実行結果

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

[button]をクリックします。"frame1" の座標が表示されます。

続いてページを下にスクロールして下図の状態で、[button]をクリックします。

スクロールして上に戻りテキストボックスの内容を確認します。topの値が小さくなっており、ボタンをクリックしたタイミングでの　"frame1" のウィンドウの座標がテキストボックスに表示されていることがわかります。

続いてウィンドウの幅を狭くし、横スクロールバーが表示される状態で右側にスクロールします。下図の状態で[button](画面の左側に少しだけ見ええています。)をクリックします。

左にスクロールし、テキストボックスの内容を確認します。leftの値が負の値になっており、ウィンドウでの表示座標の位置が取得できていることが確認できます。

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

コード

下記の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>