Document.elementFromPoint() - 座標から要素を取得する

2017/10/06

elementFromPoint()は、Documentのメソッドです。指定した座標にある要素を1つだけ取得します。複数の要素が重なっていた場合、取得するのは、一番手前にある要素だけです。

概要

名前

elementFromPoint

所属

IDL

Element? elementFromPoint(double x, double y);

仕様書

https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint

説明

第1引数(x)には、水平方向の座標を指定します。

第2引数(y)には、垂直方向の座標を指定します。

デモ

Document.elementFromPoint()のデモです。クリックした位置の座標にある要素を取得します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
<style>
div#toto {
	position: relative ;
	height: 190px ;
	background-color: #ffe ;
	text-align: center ;
	color: #fff ;
}

div#hoge {
	width: 100px ;
	height: 100px ;
	background-color: #f00 ;
	line-height: 100px ;
}

p#fuga {
	width: 80px ;
	height: 80px ;
	line-height: 80px ;
	background-color: #00f ;
	position: absolute ;
	top: 60px ;
	left: 60px ;
	margin: 0 ;
}

span#piyo {
	width: 80px ;
	height: 80px ;
	line-height: 80px ;
	background-color: #f0f ;
	position: absolute ;
	top: 110px ;
	left: 110px ;
	display: block ;
}
</style>
</head>
<body>
<div id="toto">
	<div id="hoge">div要素</div>
	<p id="fuga">p要素</p>
	<span id="piyo">span要素</span>
</div>
<hr>
<div id="result"></div>
<script>
document.body.onclick = function ( event ) {
	document.getElementById( "result" ).textContent = "" ;

	var x = event.clientX ;
	var y = event.clientY ;
	var element = document.elementFromPoint( x, y ) ;

	console.log( element ) ;
	document.getElementById( "result" ).appendChild( new Text( element ) ) ;
}
</script>
</body>
</html>