要素の位置座標を取得する方法
要素の位置座標を取得するには、getBoundingClientRect()というメソッドを利用します。
サンプルコード
要素の位置座標を取得するには、対象要素のgetBoundingClientRect()というメソッドを利用します。このメソッドで取得できるのは「ビューポート(画面内)」における位置なので、スクロール量によって値が変わります。
// 要素の位置座標を取得
var clientRect = targetElement.getBoundingClientRect() ;
// 画面の左端から、要素の左端までの距離
var x = clientRect.left ;
// 画面の上端から、要素の上端までの距離
var y = clientRect.top ;
「ページ全体」における位置を取得するには、先ほどの値に現在のスクロール量を加えましょう。
// ページの左端から、要素の左端までの距離
var px = window.pageXOffset + clientRect.left ;
// ページの上端から、要素の上端までの距離
var py = window.pageYOffset + clientRect.top ;
デモ
要素の位置座標を取得します。iframe要素内(枠内)をスクロールしてみて下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 2000px ;
height: 2000px ;
}
#target {
position: absolute ;
top: 50px ;
left: 200px ;
padding: 12px ;
border: 1px solid #000 ;
width: 100px ;
height: 100px ;
background-color: #fffff0 ;
}
</style>
</head>
<body>
<div id="target">
x = <span id="x"></span>
<br>y = <span id="y"></span>
<br>px = <span id="px"></span>
<br>py = <span id="py"></span>
</div>
<script>
var targetElement = document.getElementById( "target" ) ;
setInterval( function() {
var clientRect = targetElement.getBoundingClientRect() ;
// 画面内の位置
var x = clientRect.left ;
var y = clientRect.top ;
// ページ内の位置
var px = window.pageXOffset + clientRect.left ;
var py = window.pageYOffset + clientRect.top ;
// 表示
for ( var a=[ [ "x", x ], [ "y", y ], [ "px", px ], [ "py", py ] ],i=a.length; i--; ) {
document.getElementById( a[i][0] ).textContent = a[i][1] ;
}
}, 100 ) ;
</script>
</body>
</html>
関連記事
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- スクロール量を取得する方法
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- スクロールイベントの頻度を減らす方法
- スクロールイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- ページのURLを取得する方法
- ページのURLを取得するには、locationオブジェクトの各プロパティを参照します。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。