Ano ang HTML DOM Element offsetTop Property sa JavaScript

Ano Ang Html Dom Element Offsettop Property Sa Javascript



Ang HTML DOM Element “ offsetTop Sinusuri ng ” property ang pinakamataas na posisyon ng tinukoy na elemento ng HTML na naaayon sa dokumento. Ito ay isang espesyal na HTML DOM na read-only na property na kadalasang magagamit sa iba pang JavaScript offset properties.

Ang write-up na ito ay nagpapaliwanag sa paggana ng 'offsetTop' na property sa JavaScript.

Paano Gumagana ang HTML DOM 'offsetTop' Property sa JavaScript?

Ang ' offsetTop Gumagana ang property ng ” sa mga elemento ng HTML at ibinabalik din ang “margin”, ang nangungunang “padding”, “border”, at “scrollbar” ng parent element nito.





Syntax



elemento. offsetTop

Sa syntax na ito, ' elemento ” ay tumutukoy sa pinakamataas na posisyon ng partikular na elemento ng HTML na nauugnay sa viewport (isang blangko na lugar kung saan ipinapakita ang nilalaman ng web page).



Tandaan: Kasama sa ibinalik na halaga ang sumusunod:



  • tuktok na posisyon, at ang margin ng elemento.
  • tuktok na hangganan, scrollbar, at padding ng magulang.

Gamitin natin ang syntax sa itaas nang praktikal.

Halimbawa: Paglalapat ng 'offsetTop' na Property upang Suriin ang HTML Top Position

Ang halimbawang ito ay gumagamit ng ' offsetTop ” property para kalkulahin ang pinakamataas na posisyon ng partikular na HTML element ibig sabihin, “

” kasama ang margin nito sa mga pixel.



HTML Code

Una, dumaan sa sumusunod na HTML code:

< div id = 'Div1' istilo = 'top:20px; position: relative;margin:15px;border:3px solid blueviolet;text-align:center; padding:10px;' >

< b > Mga detalye ng ito div ay : b >< br >

itaas : 20px < br >

posisyon : kamag-anak < br >

text - ihanay : gitna < br >

margin : 15px < br >

hangganan : 3px < br >

div >< br >

< button sa pag-click = 'jsFunc()' > I-click ito pindutan >

< p id = 'para sa' > p >

Sa code sa itaas:

  • Ang '
    Ang elemento ay nilikha na mayroong nakasaad na id na 'Div1' kasama ng ' istilo ” pag-aari na nagsasagawa ng nakasaad na istilo.
  • Pagkatapos nito, tinutukoy ng body section ng “
    ” ang nakasaad na impormasyon.
  • Susunod, lumikha ng isang pindutan gamit ang '
  • Panghuli, magdagdag ng walang laman na talata sa pamamagitan ng “

    ” tag upang ipakita ang nakalkulang pinakamataas na posisyon ng elementong “

    ”.

JavaScript Code

Ngayon, isaalang-alang ang ibinigay na JavaScript code:

< iskrip >

function na jsFunc ( ) {

ay elmnt = dokumento. getElementById ( 'Div1' ) ;

saan txt = 'Ang kinakalkula na OffsetTop ay: ' + elmnt. offsetTop + 'px
' ;

dokumento. getElementById ( 'para sa' ) . panloobHTML = txt ;

}

iskrip >

Sa mga linya ng code sa itaas:

  • Ang function ay tinukoy na pinangalanang ' jsFunc() ”.
  • Sa kahulugan nito, ang variable na ' elmnt 'ay ipinahayag na may ' ay ” keyword na gumagamit ng “ getElementById() ' paraan upang ma-access ang kasamang 'div' sa pamamagitan ng id nito ' Div1 ”.
  • Pagkatapos nito, ilapat ang ' offsetTop ” property sa variable na “txt” para kalkulahin ang pinakamataas na posisyon ng kinuhang “div” sa mga pixel.
  • Sa wakas, ang 'getElementById()' ay inilapat muli upang lapitan ang idinagdag na walang laman na talata at idagdag ang nakalkulang pinakamataas na halaga ng posisyon ng elementong '
    ' sa talata sa pamamagitan ng ' panloobHTML ” ari-arian.

Output

Sa kinalabasan na ito, mapapansin na ang pinakamataas na posisyon ng ibinigay na div (kabilang ang margin), ibig sabihin, ' 35px ” ay kinakalkula alinsunod sa tinukoy na tala (sa simula ng blog) at ipinapakita sa pag-click sa pindutan.

Konklusyon

Nagbibigay ang JavaScript ng ' offsetTop ” property upang makalkula ang pinakamataas na posisyon ng HTML element na nauugnay sa viewport. Ibinabalik nito ang nakalkula na pinakamataas na posisyon ng isang elemento bilang isang integer na halaga sa ' mga pixel ”. Ang write-up na ito ay nagpakita ng layunin, paggamit, at pagpapatupad ng HTML DOM Element na 'offsetTop' na property sa JavaScript.

Iba pa

Kategorya

Patok Na Mga Post

JavaScript Petsa() Tagabuo

Paano Palitan ang Pangalan ng File o Direktoryo sa PHP Gamit ang Rename() Function

Paano Gamitin ang Arbitrary Values ​​sa Tailwind?

Paano Suriin ang Bersyon ng Network Manager sa Debian

Hula sa Presyo ng Bahay sa US

MySQL CAST Function

Mas mahusay ba ang ESP32 kaysa sa Arduino

Paano I-access at Baguhin ang Mga Halaga ng Tensor sa PyTorch?

Paano Mag-backup ng Mga Imahe ng Spotlight ng Windows sa Windows 10? - Winhelponline

Tab Space Sa halip na Maramihang Non-Breaking Spaces (“ ”)?

Para saan ang AWS Kinesis na Ginamit?

Paano Gamitin ang Hashcat sa Kali Linux?

15 Mga Halimbawa ng APT Command sa Linux

Paano Gamitin ang Proportional at Tabular Figure sa Tailwind?

Ano ang scrollLeft() Method sa jQuery

Paano Suriin Kung Nagawa ang isang Discord Account

Paano Gamitin ang Microsoft Word nang Libre: Mayroon bang Libreng Bersyon?

Paano Ko Mapapasa ang isang Array sa TypeScript?

Paano Magsagawa ng BAT File sa Windows

2 Madaling Paraan sa Pag-install Go sa Raspberry Pi