SYNCERのロゴ
アイキャッチ画像

要素の位置座標を取得する方法

要素の位置座標を取得するには、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>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。