1. 開発者向けのウェブ技術
  2. Web API
  3. Document
  4. elementFromPoint()

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Document: elementFromPoint() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

elementFromPoint() メソッドは Document オブジェクト上で利用可能で、指定した座標（ビューポートからの相対座標）における最上位の要素 (Element) を返します。

指定された点の要素が他の文書（例えば <iframe> の文書）に属する場合、その文書の親要素（<iframe> 自身）が返される。指定された点の要素が無名または XBL で生成されたコンテンツ、例えばテキストボックスのスクロールバーである場合、最初の無名ではない祖先要素（例えばテキストボックス）が返されます。

pointer-events が none に設定されている要素は無視され、その下の要素が返されます。

このメソッドが他の文書（<iframe> のサブ文書など）で実行された場合、座標はメソッドが呼び出された文書からの相対座標となります。

指定した点が文書の可視領域外にある場合や、どちらかの座標が負の値である場合、結果は null となります。

要素内の特定の位置を見つける必要がある場合は、 Document.caretPositionFromPoint() を使用してください。

構文

js
elementFromPoint(x, y)

引数

x

点の水平座標で、現在のビューポートの左端からの相対値です。

y

点の垂直座標で、現在のビューポートの上端からの相対値です。

返値

指定された座標にある最も上の要素（Element オブジェクト）です。

例

この例では、座標 (2, 2) の下にある段落要素の現在の色を設定するためのボタンを 2 つ作成しています。

JavaScript

js
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}

changeColor() メソッドは、指定した位置にある要素を取得し、その要素の現在の前景色の color プロパティを newColor 引数で指定した色に設定します。

HTML

html
<p id="para1">こちらがテキストです</p>
<button onclick="changeColor('blue');">青</button>
<button onclick="changeColor('red');">赤</button>

HTML には、色を変更する段落と、色を青に変更するボタン、色を赤に変更するボタンの 2 つが用意されています。

結果

仕様書

仕様書
CSSOM View Module
# dom-document-elementfrompoint

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告