Acest articol detaliază funcționarea proprietății „offsetTop” în JavaScript.
Cum funcționează proprietatea HTML DOM „offsetTop” în JavaScript?
„ offsetTop Proprietatea ” funcționează pe elementele HTML și returnează „marja”, „padding” de sus, „border” și „scrollbar” ale elementului părinte.
Sintaxă
element. offsetTop
În această sintaxă, „ element ” denotă poziția de sus a unui anumit element HTML în raport cu fereastra (o zonă goală în care este afișat conținutul paginii web).
Notă: Valoarea returnată include următoarele:
- poziția de sus și marginea elementului.
- chenarul de sus, bara de defilare și umplutura părintelui.
Să folosim practic sintaxa de mai sus.
Exemplu: aplicarea proprietății „offsetTop” pentru a evalua poziția de sus HTML
Acest exemplu utilizează „ offsetTop „proprietatea pentru a calcula poziția de sus a unui anumit element HTML, adică „ Mai întâi, parcurgeți următorul cod HTML: În codul de mai sus: Acum, luați în considerare codul JavaScript dat: În liniile de cod de mai sus: Ieșire În acest rezultat, se poate observa că poziția de sus a div-ului dat (inclusiv marja), adică „ 35px ” este calculat în conformitate cu nota specificată (la începutul blogului) și afișat la clic pe butonul. JavaScript oferă „ offsetTop ” pentru a calcula poziția de sus a elementului HTML în raport cu fereastra. Returnează poziția superioară calculată a unui element ca valoare întreagă în „ pixeli ”. Acest articol a demonstrat obiectivul, utilizarea și implementarea proprietății HTML DOM Element „offsetTop” în JavaScript.
Cod HTML
< b > Detaliile acest div sunt : b >< br >
top : 20px < br >
poziţie : relativ < br >
text - alinia : centru < br >
marginea : 15px < br >
frontieră : 3px < br >
div >< br >
< butonul la clic = „jsFunc()” > Apasă-l buton >
< p id = 'pentru' > p >
Cod JavaScript
funcția jsFunc ( ) {
a fost elmnt = document. getElementById ( „Div1” ) ;
unde txt = 'OffsetTop calculat este: ' + elmnt. offsetTop + „px
” ;
document. getElementById ( 'pentru' ) . innerHTML = TXT ;
}
scenariu >
Concluzie