Este artículo profundiza en el funcionamiento de la propiedad 'offsetTop' en JavaScript.
¿Cómo funciona la propiedad HTML DOM 'offsetTop' en JavaScript?
El ' Desplazamiento superior ” funciona en los elementos HTML y devuelve el “margen”, el “relleno” superior, el “borde” y la “barra de desplazamiento” de su elemento principal también.
Sintaxis
elemento. Desplazamiento superior
En esta sintaxis, “ elemento ” denota la posición superior del elemento HTML en particular en relación con la ventana gráfica (un área en blanco donde se muestra el contenido de la página web).
Nota: El valor devuelto incluye lo siguiente:
- posición superior y el margen del elemento.
- borde superior, barra de desplazamiento y relleno del padre.
Usemos la sintaxis anterior de manera práctica.
Ejemplo: aplicar la propiedad 'offsetTop' para evaluar la posición superior de HTML
Este ejemplo utiliza el ' Desplazamiento superior ” propiedad para calcular la posición superior del elemento HTML en particular, es decir, “ Primero, revisa el siguiente código HTML: En el código anterior: Ahora, considere el código JavaScript dado: En las líneas de código anteriores: Producción En este resultado, se puede observar que la posición superior del div dado (incluido el margen), es decir, ' 35px ” se calcula de acuerdo con la nota especificada (al comienzo del blog) y se muestra al hacer clic en el botón. JavaScript proporciona el ' Desplazamiento superior ” para calcular la posición superior del elemento HTML en relación con la ventana gráfica. Devuelve la posición superior calculada de un elemento como un valor entero en ' píxeles ”. Este artículo demostró el objetivo, el uso y la implementación de la propiedad 'offsetTop' del elemento HTML DOM en JavaScript.
código HTML
< b > Detalles de este div son : b >< hermano >
arriba : 20px < hermano >
posición : relativo < hermano >
texto - alinear : centro < hermano >
margen : 15px < hermano >
borde : 3 píxeles < hermano >
división >< hermano >
< botón al hacer clic = 'jsFunc ()' > Pinchalo botón >
< identificación p = 'para' > pag >
Código JavaScript
función jsFunc ( ) {
era elmnt = documento. getElementById ( 'Div1' ) ;
donde txt = 'OffsetTop calculado es: ' + olmo Desplazamiento superior + 'px
' ;
documento. getElementById ( 'para' ) . HTML interno = TXT ;
}
guion >
Conclusión