Qual è la proprietà offsetTop dell'elemento HTML DOM in JavaScript

Qual E La Proprieta Offsettop Dell Elemento Html Dom In Javascript



L'elemento DOM HTML ' offsetTop ” valuta la prima posizione dell'elemento HTML specificato corrispondente al documento. È una speciale proprietà HTML DOM di sola lettura che spesso può essere utilizzata con altre proprietà di offset JavaScript.

Questo articolo approfondisce il funzionamento della proprietà 'offsetTop' in JavaScript.

Come funziona la proprietà HTML DOM 'offsetTop' in JavaScript?

IL ' offsetTop ” funziona sugli elementi HTML e restituisce anche il 'margine', il 'padding', il 'bordo' e la 'barra di scorrimento' superiori del suo elemento genitore.





Sintassi



elemento. offsetTop

In questa sintassi, “ elemento ” indica la posizione superiore del particolare elemento HTML rispetto al viewport (un'area vuota in cui viene visualizzato il contenuto della pagina web).



Nota: Il valore restituito include quanto segue:



  • posizione superiore e il margine dell'elemento.
  • bordo superiore, barra di scorrimento e spaziatura interna del genitore.

Usiamo praticamente la sintassi precedente.

Esempio: applicazione della proprietà 'offsetTop' per valutare la posizione superiore HTML

Questo esempio utilizza il ' offsetTop ” per calcolare la posizione superiore del particolare elemento HTML, ad esempio “

” compreso il suo margine in pixel.



Codice HTML

Innanzitutto, passa attraverso il seguente codice HTML:

< ID div = 'Div1' stile = 'top:20px; position: relative;margin:15px;border:3px solid blueviolet;text-align:center; padding:10px;' >

< B > Dettagli di Questo div sono : B >< fratello >

superiore : 20px < fratello >

posizione : parente < fratello >

testo - allineare : centro < fratello >

margine : 15px < fratello >

confine : 3px < fratello >

div >< fratello >

< pulsante al clic = 'funzionejs()' > Cliccalo pulsante >

< p id = 'per' > P >

Nel codice sopra:

  • IL '
    ” viene creato un elemento con l'id dichiarato “Div1” accanto a “ stile ” proprietà che esegue lo stile dichiarato.
  • Successivamente, la sezione del corpo di '
    ' specifica le informazioni dichiarate.
  • Successivamente, crea un pulsante utilizzando il ' ” tag a cui è associato un “ al clic ” evento per eseguire la funzione “ jsFunc() ” al clic del pulsante.
  • Infine, aggiungi un paragrafo vuoto tramite il '

    ” per visualizzare la prima posizione calcolata dell'elemento “

    ”.

codice javascript

Ora, considera il codice JavaScript fornito:

< copione >

funzione jsFunc ( ) {

era olmo = documento. getElementById ( 'Div1' ) ;

dove txt = 'OffsetTop calcolato è: ' + olmo. offsetTop + 'px
' ;

documento. getElementById ( 'per' ) . innerHTML = TXT ;

}

copione >

Nelle righe di codice sopra:

  • La funzione è definita denominata “ jsFunc() ”.
  • Nella sua definizione, la variabile “ olmo ” è dichiarato con il “ era ” parola chiave che utilizza il “ getElementById() ” metodo per accedere al “div” incluso tramite il suo id “ Divisione 1 ”.
  • Successivamente, applica il ' offsetTop ” nella variabile “txt” per calcolare la posizione superiore del “div” recuperato in pixel.
  • Infine, 'getElementById()' viene applicato nuovamente per avvicinarsi al paragrafo vuoto aggiunto e aggiungere il valore della posizione superiore calcolato dell'elemento '
    ' nel paragrafo tramite il ' innerHTML ' proprietà.

Produzione

In questo risultato, si può osservare che la prima posizione del dato div (compreso il margine), cioè ' 35px ” viene calcolato in conformità con la nota specificata (all'inizio del blog) e visualizzato al clic del pulsante.

Conclusione

JavaScript fornisce il ' offsetTop ” per calcolare la posizione superiore dell'elemento HTML rispetto al viewport. Restituisce la posizione superiore calcolata di un elemento come valore intero in ' pixel ”. Questo articolo ha dimostrato l'obiettivo, l'utilizzo e l'implementazione della proprietà 'offsetTop' dell'elemento HTML DOM in JavaScript.

Altro

Categoria

Messaggi Popolari

Sottoprocesso Python. Esempi di Popen

Come installare ZLIB su Windows 10/11

Come eseguire più comandi nello stesso processo Cron

Come incorporare documenti Google in WordPress

Installa Helm su Ubuntu

Introduzione ai tipi di record in C# con esempi

Correggi l'errore di aggiornamento di Windows 10 0x800703F1

BETWEEN Operatore in Oracle

Come modificare le proporzioni a metà viaggio

Come trovare il fiore fiaccola e la pianta carnivora in Minecraft

Come connettersi all'istanza AWS EC2 da Windows

Windows Defender non si avvia su Windows 10 [RISOLTO]

Come usare la funzione PHP getdate()

Come gestire i ruoli in Discord

Come modificare il testo dell'etichetta utilizzando JavaScript

Icona della piastrella della schermata iniziale di Google Chrome grande (correzione) - Winhelponline

Come creare un database e una tabella SQLite in Node.js?

Come eseguire ChatGPT su Raspberry Pi

Come utilizzare la funzione date_modify() in PHP

Analisi dell'handsake a 3 vie TCP in Wireshark