jQueryで指定した要素のページ内での位置(絶対位置)を取得するコードを紹介します。
概要
jQueryで要素の座標値を取得する場合は offset() メソッドを利用します。offset() メソッドでは領域の左と上の座標のみ取得できるため領域の右や下の座標を取得する場合はouterWidth() メソッドとouterHeight() メソッドを利用して座標値を計算します。
なお、position() メソッドでも座標モードを明示的に指定しなければ、ページ左上からの座標が取得できます。
プログラム例
コード
下記のHTMLファイルを記述します。
<!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;
var ptop = $('#frame2').offset().top;
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>
解説
ボタンのクリックで下記のコードが実行されます。
$('#Button1').on('click', function () {
var pleft = $('#frame2').offset().left;
var ptop = $('#frame2').offset().top;
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);
});
下記のコードで、"frame2"の要素のX座標(leftの座標値)とY座標の値(topの座標値)を取得します。
var pleft = $('#frame2').offset().left;
var ptop = $('#frame2').offset().top;
取得したtopとleftの値とouterWidth、outerHeightの値を利用して、bottomとrightの座標値を求めます。
var pright = pleft + $('#frame2').outerWidth();
var pbottom = ptop + $('#frame2').outerHeight();
テキストボックスに設定する文字列を用意し、valメソッドを呼び出してテキストボックスに文字列を表示します。
var setstr = 'top:' + ptop + '\r\n'
+ 'left:' + pleft + '\r\n'
+ 'bottom:' + pbottom + '\r\n'
+ 'right:' + pright + '\r\n'
$('#TextArea1').val(setstr);
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックします。テキストボックスに"frame2"の座標値が表示されます。
続いて、ページを下にスクロールして下図の状態で[button]をクリックします。
ページ先頭まで戻りテキストボックスの値を確認します。スクロールしない状態と同じ値が表示されており、ウィンドウの表示位置ではなく、ページ内の絶対位置の値が表示されていることが確認できます。
補足
上記のコードの場合、Positionメソッドを利用しても同じ値が取得できます。
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').on('click', function () {
var pleft = $('#frame2').position().left;
var ptop = $('#frame2').position().top;
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>
プログラム例 (枠がネストしている場合)
コード
下記の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: 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;
var ptop = $('#frame2').offset().top;
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="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>
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[button]をクリックします。上部のテキストボックスにframe2の座標値が表示されます。ネストしている場合でもページの左上を基点にした座標値が表示されることが確認できます。
補足
上記のコードの場合、Positionメソッドを利用しても同じ値が取得できます。
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').on('click', function () {
var pleft = $('#frame2').position().left;
var ptop = $('#frame2').position().top;
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>
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2019-06-30
