指定された位置にある要素を取得する-JavaScript

133

JavaScriptを使用して、指定された位置にある要素をどのように識別できますか？基本的に、2つの入力パラメーター（x座標とy座標）を取り、パラメーターで表される画面上の位置にあるhtml要素を返す関数を記述しようとしています。

javascript html dom

— kjv
ソース

elementsFromPoint

— Janus Troelsen 2016年

回答:

241

document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/en-us/library/ms536417%28VS.85%29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

— ラフル
ソース

あった場合にのみ、document.elementsFromPoint要素が重複している場合には-にも。

— セイリア2014

これはie 5.5で動作し、今日はあまり使用されていません。

— Vlad Nicula、2015年

私はこの方法を試しました、そしてそれは文書に従って位置を測定します。親要素に対してどのように使用しますか？

— Charas

座標x、yにフレームまたはiframeがある場合、その場所にある要素ではなく、フレームを取得します。

— Elmue

document.elementsFromPoint実験的ではありますが、最近のWebkitおよびGecko対応ブラウザーで使用できます。MDNを参照してください。

— zopieux 2016年

elementFromPoint(x, y)ビューポートの座標x、yに要素を返すネイティブJavaScript メソッドを使用できます。

elementFromPoint w3cドラフトを参照してください

そして、コードサンプル：

function changeColor(newColor) {
    // Get the element placed at coords (2, 2)
    var elem = document.elementFromPoint(2, 2);
    // Set the foreground color to the element
    elem.style.color = newColor;
}

<p id="para1">Change this text color using the following buttons.</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>

スニペットを展開

を使用setInterval()して要素のホバーイベントを継続的に確認できますが、お勧めしません.hover(...)。代わりにとcss を使用して、アプリケーションのパフォーマンスを向上させてください。

— アンドレスモラレス
ソース