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().
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) | ? | ? | ? | ? |