Kas ir JavaScript HTML DOM elementa offsetTop īpašums

Kas Ir Javascript Html Dom Elementa Offsettop Ipasums



HTML DOM elements ' nobīdeAugšā ” rekvizīts novērtē dokumentam atbilstošā norādītā HTML elementa augšējo pozīciju. Tas ir īpašs HTML DOM tikai lasāms rekvizīts, ko bieži var izmantot kopā ar citiem JavaScript nobīdes rekvizītiem.

Šis raksts apraksta rekvizīta “offsetTop” darbību JavaScript.

Kā JavaScript darbojas HTML DOM rekvizīts “offsetTop”?

' nobīdeAugšā ” rekvizīts darbojas uz HTML elementiem un atgriež arī sava vecākelementa “margin”, augšējo “polsterējumu”, “apmali” un “ritjoslu”.







Sintakse



elements. nobīdeAugšā

Šajā sintaksē ' elements ” apzīmē konkrētā HTML elementa augšējo pozīciju attiecībā pret skata logu (tukšs apgabals, kurā tiek rādīts tīmekļa lapas saturs).



Piezīme: Atgrieztā vērtība ietver:





  • augšējā pozīcija un elementa mala.
  • augšējo apmali, ritjoslu un vecāku polsterējumu.

Izmantosim iepriekš minēto sintaksi praktiski.

Piemērs: rekvizīta “offsetTop” lietošana, lai novērtētu HTML augšējo pozīciju

Šajā piemērā tiek izmantots ' nobīdeAugšā ” rekvizītu, lai aprēķinātu konkrētā HTML elementa augšējo pozīciju, t.i., “

”, ieskaitot tā malu pikseļos.



HTML kods

Vispirms izlasiet šo HTML kodu:

< div id = 'Div1' stils = 'augšpusē: 20 pikseļi; pozīcija: relatīvā; piemale: 15 pikseļi; apmale: 3 pikseļi, zili violets; teksta līdzinājums: centrs; polsterējums: 10 pikseļi;' >

< b > Sīkāka informācija par šis div ir : b >< br >

tops : 20 pikseļi < br >

pozīciju : radinieks < br >

tekstu - izlīdzināt : centrs < br >

starpība : 15 pikseļi < br >

robeža : 3 pikseļi < br >

div >< br >

< pogu onclick = 'jsFunc()' > Noklikšķiniet uz tā pogu >

< p id = 'priekš' > lpp >

Iepriekš minētajā kodā:

  • '
    Tiek izveidots elements ar norādīto ID “Div1” līdzās “ stils ” īpašums, kas veic norādīto stilu.
  • Pēc tam “
    ” pamatdaļas sadaļa norāda norādīto informāciju.
  • Pēc tam izveidojiet pogu, izmantojot ' ' tag ar saistīto ' onclick 'notikums, lai izpildītu funkciju' jsFunc() ” noklikšķinot uz pogas.
  • Visbeidzot pievienojiet tukšu rindkopu, izmantojot '

    ”, lai parādītu elementa “

    ” aprēķināto augšējo pozīciju.

JavaScript kods

Tagad apsveriet doto JavaScript kodu:

< skripts >

funkcija jsFunc ( ) {

bija elmnt = dokumentu. getElementById ( 'Div1' ) ;

kur txt = 'Aprēķinātais OffsetTop ir: ' + elmnt. nobīdeAugšā + 'px
'
;

dokumentu. getElementById ( 'priekš' ) . innerHTML = txt ;

}

skripts >

Iepriekš minētajās koda rindās:

  • Funkcija ir definēta ar nosaukumu ' jsFunc() ”.
  • Savā definīcijā mainīgais ' elmnt ” ir deklarēts ar „ bija ' atslēgvārds, kas izmanto ' getElementById() ' metode, lai piekļūtu iekļautajam 'div' ar tā ID ' Div1 ”.
  • Pēc tam izmantojiet ' nobīdeAugšā ” rekvizītu mainīgajā “txt”, lai aprēķinātu ienestā “div” augšējo pozīciju pikseļos.
  • Visbeidzot, “getElementById()” tiek lietots vēlreiz, lai tuvotos pievienotajai tukšajai rindkopai un pievienotu elementa “
    ” aprēķināto augstākās pozīcijas vērtību rindkopā, izmantojot “ innerHTML ” īpašums.

Izvade

Šajā iznākumā var novērot, ka dotā div augšējā pozīcija (ieskaitot rezervi), t.i., “ 35 pikseļi ” tiek aprēķināts saskaņā ar norādīto piezīmi (emuāra sākumā) un tiek parādīts, noklikšķinot uz pogas.

Secinājums

JavaScript nodrošina ' nobīdeAugšā ” rekvizītu, lai aprēķinātu HTML elementa augšējo pozīciju attiecībā pret skata portu. Tas atgriež aprēķināto elementa augšējo pozīciju kā vesela skaitļa vērtību ' pikseļi ”. Šis raksts demonstrēja JavaScript HTML DOM elementa “offsetTop” rekvizīta mērķi, lietojumu un ieviešanu.