See kirjeldus käsitleb atribuudi „offsetTop” tööd JavaScriptis.
Kuidas HTML DOM-i offsetTop atribuut JavaScriptis töötab?
' offsetTop ” atribuut töötab HTML-i elementide peal ja tagastab ka oma emaelemendi “marginaali”, ülemise “täidise”, “äärise” ja “kerimisriba”.
Süntaks
element. offsetTop
Selles süntaksis ' element ” tähistab konkreetse HTML-elemendi ülemist positsiooni vaateava suhtes (tühi ala, kus kuvatakse veebilehe sisu).
Märge: Tagastatud väärtus sisaldab järgmist:
- ülemine positsioon ja elemendi veeris.
- vanema ülemine ääris, kerimisriba ja polster.
Kasutame ülaltoodud süntaksit praktiliselt.
Näide: atribuudi „offsetTop” rakendamine HTML-i ülemise positsiooni hindamiseks
See näide kasutab ' offsetTop ' atribuut konkreetse HTML-i elemendi ülemise positsiooni arvutamiseks, st ' Esmalt läbige järgmine HTML-kood: Ülaltoodud koodis: Nüüd kaaluge antud JavaScripti koodi: Ülaltoodud koodiridades: Väljund Selles tulemuses võib täheldada, et antud div ülemine positsioon (kaasa arvatud marginaal), st ' 35 pikslit ” arvutatakse vastavalt määratud märkusele (blogi alguses) ja kuvatakse nupu klõpsamisel. JavaScript pakub ' offsetTop ” atribuut, et arvutada HTML-elemendi ülemine positsioon vaateava suhtes. See tagastab elemendi arvutatud ülemise positsiooni täisarvuna ' pikslit ”. See kirjutis näitas JavaScripti HTML DOM-i elemendi 'offsetTop' eesmärki, kasutamist ja rakendamist.
HTML-kood
< b > Üksikasjad see div on : b >< br >
üleval : 20 pikslit < br >
positsiooni : sugulane < br >
tekst - joondada : Keskus < br >
marginaal : 15 pikslit < br >
piir : 3 pikslit < br >
div >< br >
< nupp onclick = 'jsFunc()' > Klõpsake seda nuppu >
< p id = 'eest' > lk >
JavaScripti kood
funktsioon jsFunc ( ) {
oli elmnt = dokument. getElementById ( 'Div1' ) ;
kus txt = 'Arvutatud OffsetTop on: ' + elmnt. offsetTop + 'px
' ;
dokument. getElementById ( 'eest' ) . sisemine HTML = txt ;
}
stsenaarium >
Järeldus