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. Najprv prejdite nasledujúcim HTML kódom: Vo vyššie uvedenom kóde: Teraz zvážte daný kód JavaScript: Vo vyššie uvedených riadkoch kódu: 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. 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.
HTML kód
< 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 >
JavaScript kód
funkcia jsFunc ( ) {
bol elmnt = dokument. getElementById ( 'Div1' ) ;
kde txt = 'Vypočítaný OffsetTop je: ' + elmnt. offsetTop + 'px
' ;
dokument. getElementById ( 'pre' ) . innerHTML = TXT ;
}
skript >
Záver