Este artigo detalha o funcionamento da propriedade “offsetTop” em JavaScript.
Como funciona a propriedade HTML DOM “offsetTop” em JavaScript?
O ' offsetTop ” funciona nos elementos HTML e retorna a “margem”, o “preenchimento” superior, a “borda” e a “barra de rolagem” de seu elemento pai também.
Sintaxe
elemento. offsetTop
Nesta sintaxe, “ elemento ” denota a posição superior do elemento HTML específico em relação à viewport (uma área em branco onde o conteúdo da página da web é exibido).
Observação: O valor retornado inclui o seguinte:
- posição superior e a margem do elemento.
- borda superior, barra de rolagem e preenchimento do pai.
Vamos usar a sintaxe acima de forma prática.
Exemplo: aplicando a propriedade “offsetTop” para avaliar a posição superior do HTML
Este exemplo utiliza o “ offsetTop ” para calcular a posição superior do elemento HTML específico, ou seja, “ Primeiro, passe pelo seguinte código HTML: No código acima: Agora, considere o código JavaScript fornecido: Nas linhas de código acima: Saída Neste resultado, pode-se observar que a posição superior do div dado (incluindo a margem), ou seja, “ 35px ” é calculado de acordo com a nota especificada (no início do blog) e exibido ao clicar no botão. JavaScript fornece o “ offsetTop ” para calcular a posição superior do elemento HTML em relação à viewport. Ele retorna a posição superior computada de um elemento como um valor inteiro em “ píxeis ”. Este artigo demonstrou o objetivo, o uso e a implementação da propriedade “offsetTop” do elemento HTML DOM em JavaScript.
Código HTML
< b > Detalhes de esse div são : b >< br >
principal : 20px < br >
posição : relativo < br >
texto - alinhar : Centro < br >
margem : 15px < br >
fronteira : 3px < br >
div >< br >
< botão ao clicar = 'jsFunc()' > Clique botão >
< p id = 'para' > p >
Código JavaScript
função jsFunc ( ) {
foi elmnt = documento. getElementById ( 'Div1' ) ;
onde txt = 'O OffsetTop calculado é: ' + elmnt. offsetTop + 'px
' ;
documento. getElementById ( 'para' ) . HTML interno = TXT ;
}
roteiro >
Conclusão