Tämä kirjoitus käsittelee 'offsetTop' -ominaisuuden toimintaa JavaScriptissä.
Kuinka HTML DOM 'offsetTop' -ominaisuus toimii JavaScriptissä?
' offsetTop ”-ominaisuus toimii HTML-elementtien kanssa ja palauttaa myös pääelementtinsä marginaalin, yläosan ”täytön”, ”reunuksen” ja ”vierityspalkin”.
Syntaksi
elementti. offsetTop
Tässä syntaksissa ' elementti ” tarkoittaa tietyn HTML-elementin ylintä sijaintia suhteessa katseluporttiin (tyhjä alue, jossa verkkosivun sisältö näkyy).
Huomautus: Palautettu arvo sisältää seuraavat:
- yläsijainti ja elementin marginaali.
- yläreuna, vierityspalkki ja ylätason täyttö.
Käytetään yllä olevaa syntaksia käytännössä.
Esimerkki: OffsetTop-ominaisuuden käyttäminen arvioimaan HTML:n yläsijaintia
Tässä esimerkissä käytetään ' offsetTop '-ominaisuus laskea tietyn HTML-elementin ylimmän sijainnin, eli ' Käy ensin läpi seuraava HTML-koodi: Yllä olevassa koodissa: Harkitse nyt annettua JavaScript-koodia: Yllä olevilla koodiriveillä: Lähtö Tässä tuloksessa voidaan havaita, että annetun div:n ylin sijainti (mukaan lukien marginaali), eli ' 35px ” lasketaan määritetyn huomautuksen mukaisesti (blogin alussa) ja näytetään painikkeen napsautuksella. JavaScript tarjoaa ' offsetTop ”-ominaisuus laskea HTML-elementin ylimmän sijainnin suhteessa näkymäporttiin. Se palauttaa elementin lasketun ylimmän sijainnin kokonaislukuna ' pikseliä ”. Tämä kirjoitus osoitti JavaScriptin HTML DOM Element 'offsetTop' -ominaisuuden tavoitteen, käytön ja toteutuksen.
HTML-koodi
< b > Yksityiskohdat Tämä div ovat : b >< br >
alkuun : 20px < br >
asema : suhteellinen < br >
teksti - kohdistaa : keskusta < br >
marginaali : 15 kuvapistettä < br >
rajaa : 3px < br >
div >< br >
< painiketta onclick = 'jsFunc()' > Klikkaa sitä -painiketta >
< p id = 'for' > s >
JavaScript-koodi
funktio jsFunc ( ) {
oli elmnt = asiakirja. getElementById ( 'Div1' ) ;
missä txt = 'Laskettu OffsetTop on: ' + elmnt. offsetTop + 'px
' ;
asiakirja. getElementById ( 'for' ) . innerHTML = txt ;
}
käsikirjoitus >
Johtopäätös