Wat is de HTML DOM Element offsetTop Property in JavaScript

Wat Is De Html Dom Element Offsettop Property In Javascript



Het HTML DOM-element ' offsetTop ” eigenschap evalueert de bovenste positie van het opgegeven HTML-element dat overeenkomt met het document. Het is een speciale HTML DOM alleen-lezen eigenschap die vaak kan worden gebruikt met andere JavaScript-offset-eigenschappen.

Dit artikel gaat dieper in op de werking van de eigenschap 'offsetTop' in JavaScript.

Hoe werkt HTML DOM-eigenschap 'offsetTop' in JavaScript?

De ' offsetTop ” eigenschap werkt op de HTML-elementen en retourneert ook de 'marge', de bovenste 'opvulling', 'rand' en 'scrollbar' van het bovenliggende element.





Syntaxis



element. offsetTop

In deze syntaxis, ' element ” geeft de bovenste positie van het specifieke HTML-element aan ten opzichte van de viewport (een leeg gebied waar de inhoud van de webpagina wordt weergegeven).



Opmerking: De geretourneerde waarde omvat het volgende:



  • bovenste positie en de marge van het element.
  • bovenrand, schuifbalk en opvulling van de ouder.

Laten we de bovenstaande syntaxis praktisch gebruiken.

Voorbeeld: de eigenschap 'offsetTop' toepassen om de HTML-toppositie te evalueren

Dit voorbeeld maakt gebruik van de ' offsetTop ' eigenschap om de toppositie van het specifieke HTML-element te berekenen, d.w.z. '

” inclusief de marge in pixels.



HTML code

Ga eerst door de volgende HTML-code:

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

< B > Details van dit div zijn : B >< br >

bovenkant : 20px < br >

positie : familielid < br >

tekst - uitlijnen : centrum < br >

marge : 15px < br >

grens : 3px < br >

div >< br >

< knop opklik = 'jsFunc()' > Klik Het knop >

< p id = 'voor' > P >

In bovenstaande code:

  • De '
    ” element wordt gemaakt met de vermelde id “Div1” naast de “ stijl ” eigenschap die de vermelde styling uitvoert.
  • Daarna specificeert het hoofdgedeelte van '
    ' de vermelde informatie.
  • Maak vervolgens een knop met behulp van de ' ' tag met een bijbehorende ' bij klikken 'gebeurtenis om de functie uit te voeren' jsFunc() ” bij het klikken op de knop.
  • Voeg ten slotte een lege paragraaf toe via de “

    ”-tag om de berekende toppositie van het “

    ”-element weer te geven.

JavaScript-code

Overweeg nu de gegeven JavaScript-code:

< script >

functie jsFunc ( ) {

was elmnt = document. getElementById ( 'Div1' ) ;

waar txt = 'Berekende OffsetTop is: ' + iepen. offsetTop + 'px
' ;

document. getElementById ( 'voor' ) . binnenHTML = tekst ;

}

script >

In de bovenstaande coderegels:

  • De functie is gedefinieerd met de naam ' jsFunc() ”.
  • In zijn definitie is de variabele ' iepen ” wordt aangegeven met de “ was ” trefwoord dat gebruik maakt van de “ getElementById() ' methode om toegang te krijgen tot de opgenomen 'div' door zijn id ' Div1 ”.
  • Pas daarna de ' offsetTop ' eigenschap in de 'txt' variabele om de bovenste positie van de opgehaalde 'div' in pixels te berekenen.
  • Ten slotte wordt de 'getElementById()' opnieuw toegepast om de toegevoegde lege alinea te benaderen en de berekende toppositiewaarde van het '
    '-element in de alinea toe te voegen via de ' binnenHTML ' eigendom.

Uitgang

In deze uitkomst kan worden waargenomen dat de bovenste positie van de gegeven div (inclusief marge), d.w.z. ' 35px ” wordt berekend in overeenstemming met de gespecificeerde opmerking (aan het begin van de blog) en weergegeven bij het klikken op de knop.

Conclusie

JavaScript biedt de ' offsetTop ” eigenschap om de bovenste positie van het HTML-element ten opzichte van de viewport te berekenen. Het retourneert de berekende toppositie van een element als een geheel getal in ' pixels ”. Dit artikel demonstreerde het doel, het gebruik en de implementatie van de eigenschap 'offsetTop' van het HTML DOM-element in JavaScript.

Ander

Categorie

Populaire Berichten

Hoe u de Windows Update-geschiedenis kunt controleren met behulp van PowerShell

OneDrive-bestanden op aanvraag downloaden - Apps blokkeren en deblokkeren via Instellingen - Winhelponline

Salesforce Apex – Datumnotatie

Hoe ontleed ik een URL in hostnaam en pad in JavaScript?

Hoe de grote ontwerpvernieuwing van Google Chrome op Windows in te schakelen

Hoe knooppunten in Kubernetes te maken

Hoe krijg je snel een Discord-standaardavatar?

Elasticsearch Clusterstatus weergeven

Hoe meer USB-poorten aan een laptop toe te voegen?

Beste Sticky Notes-apps voor Linux Mint 21

Lijsten samenvoegen in Python

Hoe een map in Linux te verwijderen

Hoe de strcat () -functie in C ++ te gebruiken

Ik kan PyAudio niet op Windows installeren. Hoe de 'Fout' op te lossen?

Welke gegevenstypen bestaan ​​er in C#

Hoe pas je de Hover on Box Decoration Break toe in Tailwind?

Wat is het verschil tussen HEAD^ en HEAD~ in Git?

Hoe verborgen apps op Samsung te ontdekken

Hoe installeer ik een Oracle Instant Client voor Toad voor Oracle?

Wat is Stack.pop() in Java