Quina és la propietat offsetTop de l'element HTML DOM a JavaScript

Quina Es La Propietat Offsettop De L Element Html Dom A Javascript



L'element HTML DOM ' offsetTop ” La propietat avalua la posició superior de l'element HTML especificat corresponent al document. És una propietat especial de només lectura HTML DOM que sovint es pot utilitzar amb altres propietats de desplaçament de JavaScript.

Aquest escrit explica el funcionament de la propietat 'offsetTop' a JavaScript.

Com funciona la propietat HTML DOM 'offsetTop' a JavaScript?

El ' offsetTop La propietat funciona amb els elements HTML i també retorna el 'marge', el 'recoiximent', la 'vora' i la 'barra de desplaçament' del seu element pare.





Sintaxi



element. offsetTop

En aquesta sintaxi, ' element ” indica la posició superior de l'element HTML concret en relació a la finestra gràfica (una àrea en blanc on es mostra el contingut de la pàgina web).



Nota: El valor retornat inclou el següent:



  • posició superior i el marge de l'element.
  • vora superior, barra de desplaçament i farciment del pare.

Utilitzem pràcticament la sintaxi anterior.

Exemple: aplicació de la propietat 'offsetTop' per avaluar la posició superior d'HTML

Aquest exemple utilitza el ' offsetTop 'propietat per calcular la posició superior de l'element HTML particular, és a dir, '

” inclòs el seu marge en píxels.



Codi HTML

Primer, aneu a través del següent codi HTML:

< id div = 'Div1' estil = 'superior:20px; posició: relatiu;marge:15px;bord:3px blau violeta sòlid;text-align:center; farciment:10px;' >

< b > Detalls de això div són : b >< br >

superior : 20 píxels < br >

posició : relatiu < br >

text - alinear : centre < br >

marge : 15 píxels < br >

frontera : 3 píxels < br >

div >< br >

< botó al fer clic = 'jsFunc()' > Feu-hi clic botó >

< p id = 'per' > pàg >

En el codi anterior:

  • El '
    L'element ' es crea amb l'identificador indicat 'Div1' al costat del ' estil ” propietat que realitza l'estil indicat.
  • Després d'això, la secció del cos de '
    ' especifica la informació indicada.
  • A continuació, creeu un botó amb el ' 'etiqueta amb un 'associat' fent clic 'esdeveniment per executar la funció' jsFunc() ” després de fer clic al botó.
  • Finalment, afegiu un paràgraf buit a través del '

    ” per mostrar la posició superior calculada de l'element “

    ”.

Codi JavaScript

Ara, considereu el codi JavaScript donat:

< guió >

funció jsFunc ( ) {

era elmnt = document. getElementById ( 'Div1' ) ;

on txt = 'OffsetTop calculat és: ' + elmnt. offsetTop + 'px
' ;

document. getElementById ( 'per' ) . innerHTML = txt ;

}

guió >

A les línies de codi anteriors:

  • La funció es defineix anomenada ' jsFunc() ”.
  • En la seva definició, la variable “ elmnt ' es declara amb el ' era ' paraula clau que utilitza el ' getElementById() ” mètode per accedir al “div” inclòs pel seu identificador “ Div1 ”.
  • Després d'això, apliqueu el ' offsetTop ” a la variable “txt” per calcular la posició superior del “div” obtingut en píxels.
  • Finalment, el 'getElementById()' s'aplica de nou per apropar-se al paràgraf buit afegit i afegir el valor de la posició superior calculada de l'element '
    ' al paràgraf mitjançant el ' innerHTML ' propietat.

Sortida

En aquest resultat, es pot observar que la posició superior del div donat (inclòs el marge), és a dir, ' 35 píxels ” es calcula d'acord amb la nota especificada (a l'inici del bloc) i es mostra al fer clic al botó.

Conclusió

JavaScript proporciona el ' offsetTop ” per calcular la posició superior de l'element HTML en relació a la finestra gràfica. Retorna la posició superior calculada d'un element com a valor enter en ' píxels ”. Aquest escrit va demostrar l'objectiu, l'ús i la implementació de la propietat 'offsetTop' de l'element HTML DOM a JavaScript.

Altres

Categoria

Entrades Populars

Com consultar una llista a MySQL

Com utilitzar la funció vprintf () a PHP?

Com canviar el nom d'una taula a MySQL mitjançant el terminal?

2 mètodes fàcils per instal·lar Docker a Raspberry Pi

Què és una indicació de tipus en PHP?

Com crear una matriu a MATLAB

Quant costa el mig viatge?

Com alinear el text verticalment en CSS

Com instal·lar Snort a Ubuntu 22.04

Com obrir i utilitzar el fitxer SQLite

Com configurar les IP externes de Deny Service a Kubernetes

Com instal·lar Flask a Linux Mint 21

Com utilitzar el comandament Grep a Linux

Com funciona el 'createInterface()' a Node.js?

Semàfors POSIX en C

Com utilitzar Bash Echo amb Color

Genèrics de Java: com utilitzar claudàtors angulars a la pràctica

Com crear efectes d'esvaïment suaus mitjançant el mètode fadeOut() de jQuery?

Com resoldre l'error 'Cap mòdul anomenat Sklearn' a Python

Funció sprintf en C