Документ: метод elementFromPoint()

Метод elementFromPoint(), доступный для объекта Document, возвращает самый верхний Element по заданным координатам (относительно области просмотра).

Если элемент по заданным координатам принадлежит другому документу (например, документу <iframe>), возвращается родительский элемент этого документа (сам <iframe>). Если элемент по заданным координатам является анонимным или сгенерированным XBL-контентом, например, полосы прокрутки текстового поля, возвращается первый неанонимный родительский элемент (например, само текстовое поле).

Элементы с pointer-events, установленным в none будут проигнорированы, и будет возвращен расположенный ниже элемент.

Если метод выполняется на другом документе (например, поддокументе <iframe>), координаты относительны к документу, в котором вызывается метод.

Если заданная точка находится за пределами видимой области документа или любая координата отрицательна, результат null.

Если вам нужно найти конкретное положение внутри элемента, используйте Document.caretPositionFromPoint().

x

Горизонтальная координата точки, относительно левого края текущей области просмотра.

y

Вертикальная координата точки, относительно верхнего края текущей области просмотра.

Объект Element, самый верхний элемент по заданным координатам.

В этом примере создаются две кнопки, позволяющие установить текущий цвет элемента абзаца, расположенного по координатам (2, 2).

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

Метод changeColor() получает элемент по заданной точке и затем устанавливает свойство текущего переднего color этого элемента на цвет, указанный параметром newColor.

<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>

HTML предоставляет абзац, цвет которого будет меняться, а также две кнопки: одна для изменения цвета на синий, другая — на красный.

• Document.elementsFromPoint()