We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

O método elementFromPoint() da interface Document retorna o elemento de maior nível nas coordenadas especificadas.

Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).

Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é null.

Se você precisa encontrar uma posição específica dentro do elemento, use Document.caretPositionFromPoint().

Note: Chamados por documentos XUL devem esperar até o evento onload ser acionado antes de chamar este método.

Sintaxe

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

Parâmetros

x
Uma posição horizontal dentro do viewport atual.
y
Uma position vertical dentro do viewport atual.

Valor retornado

O objeto de nível mais alto Element dentro das coordenadas declaradas.

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
<title>exemplo de elementFromPoint</title>

<script>
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Algum texto aqui</p>
<button onclick="changeColor('blue');">azul</button>
<button onclick="changeColor('red');">vermelho</button>
</body>
</html>

Especificações

Especificação Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'elementFromPoint' in that specification.
Rascunho atual Definição Inicial.

Compatibilidade entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support  4.0 3 5.5 10.50 (Yes)
Funcionalidade Android Chrome para Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

Etiquetas do documento e colaboradores

Colaboradores desta página: cezaraugusto
Última atualização por: cezaraugusto,