지정된 위치에서 요소 가져 오기-JavaScript

133

Javascript를 사용하여 주어진 위치에서 요소를 어떻게 식별 할 수 있습니까? 기본적으로 두 개의 입력 매개 변수 (x 및 y 좌표)를 사용하여 매개 변수로 표시된 화면의 위치에서 html 요소를 반환하는 함수를 작성하려고합니다.

javascript html dom

— kjv
소스

elementsFromPoint

— 야누스 트롤 슨

답변:

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요소가 겹치는 경우 가있는 경우에만 .

— Seiyria

나는 이것이 5.5에서 작동하는 것에 놀랐고 오늘날에는 그렇게 많이 사용되지 않습니다.

— Vlad Nicula

이 방법을 사용해 보았고 문서에 따라 위치를 측정합니다. 부모 요소와 관련하여 어떻게 사용합니까?

— Charas

좌표 x, y에 프레임 또는 iframe이 있으면 해당 위치의 요소가 아니라 프레임을 가져옵니다.

— Elmue

document.elementsFromPoint실험적이지만 최신 웹킷 및 Gecko 지원 브라우저에서 사용할 수 있습니다. MDN을 참조하십시오 .

— zopieux

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 를 사용 하여 응용 프로그램 성능을 향상 시키십시오.

— 안드레스 모랄레스
소스