Kas yra „JavaScript“ HTML DOM elemento offsetTop ypatybė

Kas Yra Javascript Html Dom Elemento Offsettop Ypatybe



HTML DOM elementas “ offsetTop ” ypatybė įvertina aukščiausią nurodyto HTML elemento, atitinkančio dokumentą, poziciją. Tai speciali HTML DOM tik skaitymo ypatybė, kuri dažnai gali būti naudojama su kitomis JavaScript poslinkio savybėmis.

Šiame rašte išsamiai aprašomas „offsetTop“ savybės „JavaScript“ veikimas.

Kaip HTML DOM „offsetTop“ nuosavybė veikia „JavaScript“?

„ offsetTop “ ypatybė veikia su HTML elementais ir grąžina pirminio elemento „maržą“, viršutinę „padding“, „border“ ir „slinkties juostą“.



Sintaksė



elementas. offsetTop

Šioje sintaksėje „ elementas “ žymi konkretaus HTML elemento aukščiausią padėtį peržiūros srities atžvilgiu (tuščia sritis, kurioje rodomas tinklalapio turinys).



Pastaba: Grąžinta vertė apima:



  • viršutinė padėtis ir elemento paraštė.
  • viršutinė kraštinė, slinkties juosta ir pagrindinio elemento užpildas.

Naudokime aukščiau pateiktą sintaksę praktiškai.

Pavyzdys: ypatybės „offsetTop“ taikymas HTML viršutinei pozicijai įvertinti

Šiame pavyzdyje naudojama „ offsetTop ypatybę, kad būtų galima apskaičiuoti konkretaus HTML elemento aukščiausią padėtį, t. y.

“, įskaitant jo paraštę pikseliais.



HTML kodas

Pirmiausia peržiūrėkite šį HTML kodą:

< dal id = 'Div1' stilius = 'viršus: 20 tšk.; padėtis: santykinė; paraštė: 15 tšk.; kraštinė: 3 tšk. vientisa mėlyna violetinė; teksto lygiavimas: centre; užpildymas: 10 taškų;' >

< b > Išsami informacija apie tai div yra : b >< br >

viršuje : 20 piks < br >

padėtis : giminaitis < br >

tekstą - lygiuotis : centras < br >

marža : 15 piks < br >

siena : 3 piks < br >

div >< br >

< mygtukas onclick = 'jsFunc()' > Spustelėkite jį mygtuką >

< p id = 'dėl' > p >

Aukščiau pateiktame kode:

  • „
    “ elementas sukuriamas su nurodytu ID „Div1“ kartu su „ stilius “ savybė, kuri atlieka nurodytą stilių.
  • Po to „
    “ pagrindiniame skyriuje nurodoma nurodyta informacija.
  • Tada sukurkite mygtuką naudodami „ 'žyma su susijusia ' paspaudus 'įvykis funkcijai vykdyti' jsFunc() “ spustelėjus mygtuką.
  • Galiausiai pridėkite tuščią pastraipą naudodami „

    “ žymą, kad būtų rodoma apskaičiuota viršutinė elemento „

    “ padėtis.

JavaScript kodas

Dabar apsvarstykite pateiktą „JavaScript“ kodą:

< scenarijus >

funkcija jsFunc ( ) {

buvo elmnt = dokumentas. getElementById ( 'Div1' ) ;

kur txt = 'Apskaičiuotas OffsetTop yra: ' + elmnt. offsetTop + 'px
' ;

dokumentas. getElementById ( 'dėl' ) . vidinis HTML = txt ;

}

scenarijus >

Aukščiau pateiktose kodo eilutėse:

  • Funkcija apibrėžta pavadinimu ' jsFunc() “.
  • Jo apibrėžime kintamasis ' elmnt “ yra deklaruojamas su „ buvo ' raktinis žodis, kuris naudoja ' getElementById() ' būdas pasiekti įtrauktą 'div' pagal jo ID ' 1 skyrius “.
  • Po to pritaikykite „ offsetTop ypatybę kintamajame „txt“, kad apskaičiuotų aukščiausią gauto „div“ padėtį pikseliais.
  • Galiausiai dar kartą taikomas „getElementById()“, kad būtų galima pasiekti pridėtą tuščią pastraipą ir pridėti apskaičiuotą „
    “ elemento aukščiausios padėties reikšmę pastraipoje per „ vidinis HTML ' nuosavybė.

Išvestis

Šiame rezultate galima pastebėti, kad aukščiausia duoto div pozicija (įskaitant paraštę), t.y. 35 piks “ yra apskaičiuojamas pagal nurodytą pastabą (tinklaraščio pradžioje) ir rodomas spustelėjus mygtuką.

Išvada

„JavaScript“ pateikia „ offsetTop ” ypatybę, kad būtų galima apskaičiuoti aukščiausią HTML elemento padėtį peržiūros srities atžvilgiu. Jis grąžina apskaičiuotą viršutinę elemento padėtį kaip sveikąjį skaičių „ pikselių “. Šis įrašas parodė „JavaScript“ HTML DOM elemento „offsetTop“ tikslą, naudojimą ir įgyvendinimą.

Kita

Kategorija

Populiarios Temos

„Windows“ paketinio failo pavyzdys

Kaip naudoti jaustukus sistemoje „Windows 10“.

Kaip įdiegti ir žaisti „Roblox“ – trumpas kompiuterio vadovas

Elasticsearch Gaukite slapyvardį

Kaip nustatyti ir atidaryti „Windows“ diktorių

Kaip įdiegti be serverio Node.js API su AWS API šliuzu?

Kaip pakeisti „Iframe“ šaltinį „JavaScript“?

Svarbūs „Proxmox VE 8 PCI/PCIE“ pataisymai, pataisymai ir sprendimai

Pašalinkite „3D Print with 3D Builder“ dešiniuoju pelės mygtuku spustelėkite meniu parinktį sistemoje „Windows 10“ - „Winhelponline“

iconv komanda Linux sistemoje

Python Nėra raktinio žodžio

Elasticsearch Įgalinti anoniminį prisijungimą

Kaip ištaisyti kažką ne taip, bandykite dar kartą vėliau, klaida Roblox Mobile

Kaip naudoti „Modulo“ operatorių PHP

Stebėkite Raspberry Pi per Monit

Kaip sužinoti, ar kažkas jus užblokavo „TikTok“.

Kaip išspręsti bendras darbalaukio „Roblox“ problemas

Klaida „Cout yra dviprasmiška“ C++

Atkurkite duomenis Linux sistemoje naudodami ddrescue

Ar įmanoma atlikti nedidelę patikrą pirmiausia nepatikrinus visos saugyklos?