Kaj je lastnost offsetTop elementa HTML DOM v JavaScriptu

Kaj Je Lastnost Offsettop Elementa Html Dom V Javascriptu



Element HTML DOM ' offsetTop ” lastnost oceni zgornji položaj podanega elementa HTML, ki ustreza dokumentu. To je posebna lastnost HTML DOM samo za branje, ki se lahko pogosto uporablja z drugimi lastnostmi odmika JavaScript.

Ta zapis podrobneje opisuje delovanje lastnosti »offsetTop« v JavaScriptu.

Kako deluje lastnost »offsetTop« HTML DOM v JavaScriptu?

' offsetTop ” lastnost deluje na elementih HTML in vrne tudi “margin”, “padding” na vrhu, “border” in “scrollbar” svojega nadrejenega elementa.





Sintaksa



element. offsetTop

V tej sintaksi ' element ” označuje zgornji položaj določenega elementa HTML glede na vidno polje (prazno območje, kjer je prikazana vsebina spletne strani).



Opomba: Vrnjena vrednost vključuje naslednje:



  • zgornji položaj in rob elementa.
  • zgornja obroba, drsni trak in oblazinjenje nadrejenega.

Uporabimo zgornjo sintakso praktično.

Primer: uporaba lastnosti »offsetTop« za oceno zgornjega položaja HTML

Ta primer uporablja ' offsetTop ” lastnost za izračun zgornjega položaja določenega elementa HTML, tj.

« vključno z robom v slikovnih pikah.



HTML koda

Najprej preglejte to kodo HTML:

< div id = 'Div1' stil = 'top:20px; položaj: relativno;margin:15px;border:3px polna modrovijolična;text-align:center; padding:10px;' >

< b > Podrobnosti o to div so : b >< št >

vrh : 20 slikovnih pik < št >

položaj : relativno < št >

besedilo - poravnati : center < št >

marža : 15 slikovnih pik < št >

meja : 3px < št >

div >< št >

< gumb na klik = 'jsFunc()' > Kliknite ga gumb >

< p id = 'za' > str >

V zgornji kodi:

  • '
    « je ustvarjen element z navedenim ID-jem »Div1« poleg » stil ” lastnost, ki izvaja navedeni slog.
  • Po tem razdelek telesa “
    ” podaja navedene informacije.
  • Nato ustvarite gumb z uporabo » »oznaka s povezanim« onclick ” dogodek za izvedbo funkcije ” jsFunc() « ob kliku na gumb.
  • Nazadnje dodajte prazen odstavek prek »

    ” za prikaz izračunanega zgornjega položaja elementa “

    ”.

Koda JavaScript

Zdaj pa razmislite o podani kodi JavaScript:

< scenarij >

funkcija jsFunc ( ) {

je bil elmnt = dokument. getElementById ( 'Div1' ) ;

kje txt = 'Izračunani OffsetTop je: ' + elmnt. offsetTop + 'px
' ;

dokument. getElementById ( 'za' ) . notranjiHTML = txt ;

}

scenarij >

V zgornjih vrsticah kode:

  • Funkcija je definirana z imenom ' jsFunc() ”.
  • V svoji definiciji je spremenljivka ' elmnt ' je deklariran z ' je bil ' ključna beseda, ki uporablja ' getElementById() ' metoda za dostop do vključenega 'div' z njegovim ID-jem ' Div1 ”.
  • Po tem uporabite » offsetTop ” v spremenljivki “txt” za izračun zgornjega položaja pridobljenega “div” v slikovnih pikah.
  • Nazadnje se znova uporabi »getElementById()«, da se približa dodanemu praznemu odstavku in doda izračunano vrednost najvišjega položaja elementa »
    « v odstavku prek » notranjiHTML ” lastnina.

Izhod

V tem rezultatu je mogoče opaziti, da je najvišji položaj danega diva (vključno z maržo), tj. 35 slikovnih pik ” se izračuna v skladu z navedeno opombo (na začetku spletnega dnevnika) in se prikaže ob kliku gumba.

Zaključek

JavaScript ponuja » offsetTop ” za izračun zgornjega položaja elementa HTML glede na vidno polje. Vrne izračunani zgornji položaj elementa kot celoštevilsko vrednost v ' slikovnih pik ”. Ta zapis je pokazal cilj, uporabo in implementacijo lastnosti »offsetTop« elementa HTML DOM v JavaScriptu.

drugo

Kategorija

Priljubljene Objave

Cassandra Clear Snapshots

Kako namestiti Proxmox VE 8 na vaš strežnik

Kako poznati privzeto poimenovanje veje v GitHubu?

Kako namestiti VMware Workstation 17 Pro na Ubuntu 22.04 LTS

Funkcija SQL DENSE_RANK().

3 načini za spremembo privzetega gesla na Raspberry Pi

Kako namestiti Rust na Ubuntu

Kako deluje upravitelj logičnih nosilcev (LVM) v sistemu Linux

Kaj je direktiva #define v C++

Preverjanje velikosti datoteke med nalaganjem z uporabo JavaScript / jQuery

Kako odstraniti Gutter Space za določen div v Bootstrapu

Kako preveriti, ali je vrednost številka v JavaScriptu

Kako odstraniti Node.js iz Raspberry Pi

Uporaba Isalpha() in Isdigit() v C/C++: Kako deluje

Ansible Prezri napaka

Kako implementirati SSL Passthrough v HAProxy

Kako pretvoriti JSON v/iz zemljevida v JavaScriptu?

Windows 11 Native RGB Dynamic Lighting Controls

Kako uporabljati ležečo stran v LaTeXu

Kako namestiti GNU Debugger GDB na Linux Mint 21