Čo je to vlastnosť HTML DOM Element offsetTop v JavaScripte

Co Je To Vlastnost Html Dom Element Offsettop V Javascripte



Element HTML DOM “ offsetTop Vlastnosť ” vyhodnotí hornú pozíciu zadaného prvku HTML zodpovedajúceho dokumentu. Ide o špeciálnu vlastnosť HTML DOM len na čítanie, ktorú možno často použiť s inými offsetovými vlastnosťami JavaScriptu.

Tento zápis rozvádza fungovanie vlastnosti „offsetTop“ v JavaScripte.

Ako funguje vlastnosť HTML DOM „offsetTop“ v JavaScripte?

' offsetTop Vlastnosť ” funguje na prvkoch HTML a vracia aj „okraj“, hornú časť „výplň“, „okraj“ a „posúvanie“ svojho nadradeného prvku.







Syntax



element. offsetTop

V tejto syntaxi „ element “ označuje najvyššiu pozíciu konkrétneho prvku HTML vzhľadom na zobrazovanú oblasť (prázdna oblasť, kde sa zobrazuje obsah webovej stránky).



Poznámka: Vrátená hodnota zahŕňa nasledujúce položky:





  • horná pozícia a okraj prvku.
  • horný okraj, posuvník a výplň rodiča.

Využime vyššie uvedenú syntax prakticky.

Príklad: Použitie vlastnosti „offsetTop“ na vyhodnotenie hornej pozície HTML

Tento príklad využíva „ offsetTop vlastnosť na výpočet najvyššej pozície konkrétneho prvku HTML, tj.

“ vrátane okraja v pixeloch.



HTML kód

Najprv prejdite nasledujúcim HTML kódom:

< div id = 'Div1' štýl = 'top:20px; position: relativní;margin:15px;border:3px solid blueviolet;text-align:center; padding:10px;' >

< b > Podrobnosti o toto div sú : b < br >

top : 20 pixelov < br >

pozíciu : príbuzný < br >

text - zarovnať : centrum < br >

marža : 15 pixelov < br >

hranica : 3px < br >

div < br >

< tlačidlo onclick = 'jsFunc()' > Kliknite naň tlačidlo >

< p id = 'pre' > p >

Vo vyššie uvedenom kóde:

  • '
    vytvorí sa prvok s uvedeným id „Div1“ vedľa „ štýl ” vlastnosť, ktorá vykonáva uvedený štýl.
  • Potom časť tela „
    “ špecifikuje uvedené informácie.
  • Ďalej vytvorte tlačidlo pomocou „ ” tag s pridruženým “ po kliknutí “udalosť na vykonanie funkcie” jsFunc() “ po kliknutí na tlačidlo.
  • Nakoniec pridajte prázdny odsek cez „

    ” na zobrazenie vypočítanej hornej pozície prvku „

    “.

JavaScript kód

Teraz zvážte daný kód JavaScript:

< skript >

funkcia jsFunc ( ) {

bol elmnt = dokument. getElementById ( 'Div1' ) ;

kde txt = 'Vypočítaný OffsetTop je: ' + elmnt. offsetTop + 'px
'
;

dokument. getElementById ( 'pre' ) . innerHTML = TXT ;

}

skript >

Vo vyššie uvedených riadkoch kódu:

  • Funkcia je definovaná s názvom „ jsFunc() “.
  • Vo svojej definícii premenná „ elmnt “ sa deklaruje s „ bol ” kľúčové slovo, ktoré využíva “ getElementById() ” metóda na prístup k zahrnutému “div” podľa jeho id “ Div1 “.
  • Potom použite „ offsetTop ” v premennej “txt” na výpočet hornej pozície načítaného “div” v pixeloch.
  • Nakoniec sa znova použije „getElementById()“, aby sa priblížilo k pridanému prázdnemu odseku a pridala sa vypočítaná hodnota hornej pozície prvku „
    “ v odseku cez „ innerHTML ' nehnuteľnosť.

Výkon

V tomto výsledku je možné pozorovať, že horná pozícia daného div (vrátane marginu), t.j. 35 pixelov “ sa vypočíta podľa zadanej poznámky (na začiatku blogu) a zobrazí sa po kliknutí na tlačidlo.

Záver

JavaScript poskytuje „ offsetTop ” na výpočet hornej pozície prvku HTML vzhľadom na výrez. Vráti vypočítanú hornú pozíciu prvku ako celočíselnú hodnotu v „ pixelov “. Tento zápis demonštroval cieľ, použitie a implementáciu vlastnosti „offsetTop“ prvku HTML DOM v jazyku JavaScript.