jQueryで指定した要素のスクリーン上での座標値を取得するコードを紹介します。
概要
jQueryでウィンドウ上での座標値を取得する場合は、要素のオブジェクトのoffsetやpositionメソッドを呼び出し、ページ全体の座標を取得し、その値からスクロールされた量の差をとることでウィンドウ上の座標を取得できます。
プログラム例
コード
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
.frame {
height: 240px;
border: 1px solid #c769cb;
}
-->
</style>
<script type="text/javascript" src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').on('click', function () {
var pleft = $('#frame2').offset().left - $(window).scrollLeft();
var ptop = $('#frame2').offset().top - $(window).scrollTop();
var pright = pleft + $('#frame2').outerWidth();
var pbottom = ptop + $('#frame2').outerHeight();
var setstr = 'top:' + ptop + '\r\n'
+ 'left:' + pleft + '\r\n'
+ 'bottom:' + pbottom + '\r\n'
+ 'right:' + pright + '\r\n'
$('#TextArea1').val(setstr);
});
});
</script>
</head>
<body>
<div>jQuery Position Demo</div>
<div><textarea id="TextArea1" rows="16" cols="80"></textarea></div>
<div><input id="Button1" type="button" value="button" /></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>
解説
コードの大部分は
こちらの記事で紹介している、指定した要素の絶対座標を取得するコードとほぼ同じです。
違いは下記のコード部分で、offset メソッドを呼び出して取得した値から、
$(window).scrollLeft() $(window).scrollTop() の値を引いています。スクロール量をページの絶対座標から引くことでウィンドウ上での座表を計算しています。
var pleft = $('#frame2').offset().left - $(window).scrollLeft();
var ptop = $('#frame2').offset().top - $(window).scrollTop();
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
[button]をクリックします。"frame2" のスクリーン上での座標値が表示されます。
ページをスクロールし、下図の位置で[button]をクリックします。
上部のテキストボックスに戻ると、先ほどと異なる値が表示されており、ウィンドウ上の座標であることがわかります。
ページを右側にスクロールした、下図の状態で[button]をクリックします。
上部のテキストボックスに戻ると、Leftの値が(-)マイナスの値になっており、ウィンドウ上の座標であることが確認できます。
プログラム例 : 枠がネストする場合
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2019-06-30
