Mi az a HTML DOM elem offsetTop tulajdonság a JavaScriptben?

Mi Az A Html Dom Elem Offsettop Tulajdonsag A Javascriptben



A HTML DOM elem ' offsetTop ” tulajdonság kiértékeli a dokumentumnak megfelelő megadott HTML-elem felső pozícióját. Ez egy speciális HTML DOM csak olvasható tulajdonság, amely gyakran használható más JavaScript offset tulajdonságokkal.

Ez az írás a JavaScript „offsetTop” tulajdonságának működését részletezi.

Hogyan működik a HTML DOM „offsetTop” tulajdonság a JavaScriptben?

A ' offsetTop ” tulajdonság a HTML-elemeken dolgozik, és visszaadja a „margót”, a felső „kitöltést”, „szegélyt” és a „gördítősávot” is a szülőelemének.





Szintaxis



elem. offsetTop

Ebben a szintaxisban a „ elem ” az adott HTML-elem legfelső pozícióját jelöli a nézetablakhoz képest (egy üres terület, ahol a weboldal tartalma megjelenik).



Jegyzet: A visszaadott érték a következőket tartalmazza:



  • legfelső pozícióját és az elem margóját.
  • felső szegély, görgetősáv és a szülő padding.

Használjuk gyakorlatiasan a fenti szintaxist.

Példa: Az „offsetTop” tulajdonság alkalmazása a HTML felső pozíciójának kiértékeléséhez

Ez a példa a „ offsetTop ” tulajdonság az adott HTML-elem legfelső pozíciójának kiszámításához, pl.

” beleértve a margót is pixelben.



HTML kód

Először menjen át a következő HTML-kódon:

< div id = 'Div1' stílus = 'felső: 20 képpont; pozíció: relatív; margó: 15 képpont; szegély: 3 képpont tömör kéklila; szöveg igazítása: középen; kitöltés: 10 képpont;' >

< b > Részletek a ez div vannak : b >< br >

tetejére : 20 képpont < br >

pozíció : relatív < br >

szöveg - igazítsa : központ < br >

árrés : 15 képpont < br >

határ : 3 képpont < br >

div >< br >

< gomb onclick = 'jsFunc()' > Kattints rá gomb >

< p id = 'for' > p >

A fenti kódban:

  • A '
    ” elem jön létre a „Div1” azonosítóval a „ stílus ” tulajdonság, amely végrehajtja a megadott stílust.
  • Ezt követően a „
    ” törzsrésze határozza meg a megadott információkat.
  • Ezután hozzon létre egy gombot a „ ' címke társított ' kattintásra 'esemény a funkció végrehajtásához' jsFunc() ” gombra kattintva.
  • Végül adjon hozzá egy üres bekezdést a '

    ” címkét a „

    ” elem számított felső pozíciójának megjelenítéséhez.

JavaScript kód

Most vegye figyelembe a megadott JavaScript kódot:

< forgatókönyv >

függvény jsFunc ( ) {

volt elmnt = dokumentum. getElementById ( 'Div1' ) ;

ahol txt = 'A számított OffsetTop: ' + elmnt. offsetTop + 'px
' ;

dokumentum. getElementById ( 'for' ) . innerHTML = txt ;

}

forgatókönyv >

A fenti kódsorokban:

  • A függvény neve ' jsFunc() ”.
  • Meghatározásában a „ változó elmnt ' a ' volt ' kulcsszó, amely a ' getElementById() ' metódus a mellékelt 'div' eléréséhez az azonosítójával ' Div1 ”.
  • Ezt követően alkalmazza a „ offsetTop ” tulajdonságot a „txt” változóban, hogy kiszámítsa a lekért „div” legfelső pozícióját képpontokban.
  • Végül a „getElementById()” ismét alkalmazza a hozzáadott üres bekezdést, és hozzáfűzi a „
    ” elem számított felső pozíciójának értékét a bekezdéshez a „ innerHTML ' ingatlan.

Kimenet

Ennél az eredménynél megfigyelhető, hogy az adott div felső pozíciója (margóval együtt), azaz: 35 képpont ” a megadott megjegyzésnek megfelelően (a blog elején) kerül kiszámításra, és a gombra kattintva megjelenik.

Következtetés

A JavaScript biztosítja a „ offsetTop ” tulajdonság a HTML-elem nézetablakhoz viszonyított legfelső pozíciójának kiszámításához. Egy elem kiszámított felső pozícióját egész értékként adja vissza a „ pixel ”. Ez az írás bemutatta a HTML DOM Element „offsetTop” tulajdonságának célját, használatát és megvalósítását a JavaScriptben.

Egyéb

Kategória

Népszerű Bejegyzések

A képernyőrögzítő használata Linux alatt

Az Ansible telepítése és használata Windows 11 rendszeren

Hogyan grep több szót Linuxban

Hogyan használhatunk magas szintű (S3) parancsokat az AWS CLI-vel?

Hogyan rajzoljunk egyenletet a MATLAB-ban

Hogyan találhatunk objektumot azonosító alapján JavaScript objektumok tömbjében

Hogyan léphet kapcsolatba egy tapasztalt Roblox-alkotóval

Hogyan lehet adatokat kivonni a JSON-típusból a MySQL-ben

A DLL hibák vagy a hiányzó DLL fájlokkal kapcsolatos problémák javítása a Windows 10 és 11 rendszerben

C++ tagfüggvénymutató

A PyTorch telepítése az Anacondába

Hogyan klónozható a GitLab legutóbbi kötelezettségvállalása?

Mi az a margin-top tulajdonság a CSS-ben?

Hogyan lehet megtisztítani a WinSxS mappát a Windows rendszerben?

A DataFrame transzponálása R-ben

Hogyan találhatunk normákat a MATLAB-ban?

Maximális altömb probléma C++ nyelven

Mik a PowerShell rendszerleíró kulcsai és hogyan működik

Hogyan lehet megoldani a Bash terminál hibáját: „Bash: szintaktikai hiba a váratlan „újsor” token közelében

Hogyan működik a CREATE DATABASE utasítás a MySQL-ben