Was ist die OffsetTop-Eigenschaft des HTML-DOM-Elements in JavaScript?

Was Ist Die Offsettop Eigenschaft Des Html Dom Elements In Javascript



Das HTML-DOM-Element „ offsetTop Die Eigenschaft wertet die oberste Position des angegebenen HTML-Elements aus, das dem Dokument entspricht. Es handelt sich um eine spezielle schreibgeschützte HTML-DOM-Eigenschaft, die oft mit anderen JavaScript-Offset-Eigenschaften verwendet werden kann.

Dieser Artikel erläutert die Funktionsweise der Eigenschaft „offsetTop“ in JavaScript.

Wie funktioniert die HTML-DOM-Eigenschaft „offsetTop“ in JavaScript?

Der ' offsetTop Die Eigenschaft „wirkt auf die HTML-Elemente und gibt auch den „Rand“, den oberen „Abstand“, den „Rahmen“ und die „Bildlaufleiste“ des übergeordneten Elements zurück.





Syntax



Element. offsetTop

In dieser Syntax: „ Element „bezeichnet die oberste Position des jeweiligen HTML-Elements relativ zum Ansichtsfenster (ein leerer Bereich, in dem der Inhalt der Webseite angezeigt wird).



Notiz: Der zurückgegebene Wert umfasst Folgendes:



  • oberste Position und den Rand des Elements.
  • Oberer Rand, Bildlaufleiste und Polsterung des übergeordneten Elements.

Lassen Sie uns die obige Syntax praktisch anwenden.

Beispiel: Anwenden der Eigenschaft „offsetTop“, um die obere HTML-Position auszuwerten

Dieses Beispiel verwendet das „ offsetTop ”-Eigenschaft, um die oberste Position des jeweiligen HTML-Elements zu berechnen, d. h. „

”einschließlich seines Randes in Pixel.



HTML Quelltext

Gehen Sie zunächst den folgenden HTML-Code durch:

< Div-ID = „Div1“ Stil = „top:20px; position: relative;margin:15px;border:3px solid blueviolet;text-align:center; padding:10px;“ >

< B > Details von Das div sind : B >< br >

Spitze : 20px < br >

Position : relativ < br >

Text - ausrichten : Center < br >

Rand : 15px < br >

Grenze : 3px < br >

div >< br >

< Schaltfläche onclick = „jsFunc()“ > Klick es Taste >

< p-ID = 'für' > P >

Im obigen Code:

  • Der '
    Es wird ein Element mit der angegebenen ID „Div1“ neben „ erstellt. Stil ”-Eigenschaft, die das angegebene Styling durchführt.
  • Danach spezifiziert der Body-Abschnitt von „
    “ die angegebenen Informationen.
  • Erstellen Sie als Nächstes eine Schaltfläche mit dem Befehl „ ”-Tag mit einem zugehörigen „ onclick „Ereignis zum Ausführen der Funktion“ jsFunc() ” beim Klicken auf die Schaltfläche.
  • Fügen Sie abschließend einen leeren Absatz über die Schaltfläche „ hinzu.

    ”-Tag, um die berechnete oberste Position des „

    “-Elements anzuzeigen.

JavaScript-Code

Betrachten Sie nun den angegebenen JavaScript-Code:

< Skript >

Funktion jsFunc ( ) {

war elmnt = dokumentieren. getElementById ( „Div1“ ) ;

wo txt = „Berechneter OffsetTop ist:“ + Ulme. offsetTop + „px
“ ;

dokumentieren. getElementById ( 'für' ) . innerHTML = txt ;

}

Skript >

In den obigen Codezeilen:

  • Die Funktion wird mit dem Namen „ jsFunc() “.
  • In ihrer Definition ist die Variable „ Ulme “ wird mit dem „ War ”-Schlüsselwort, das das „ getElementById() „Methode zum Zugriff auf das enthaltene „div“ über seine ID „ Div1 “.
  • Wenden Sie danach das „ offsetTop ”-Eigenschaft in der Variable „txt“, um die oberste Position des abgerufenen „div“ in Pixeln zu berechnen.
  • Abschließend wird „getElementById()“ erneut angewendet, um sich dem hinzugefügten leeren Absatz anzunähern und den berechneten oberen Positionswert des „
    “-Elements im Absatz über „ anzuhängen. innerHTML ' Eigentum.

Ausgang

In diesem Ergebnis kann beobachtet werden, dass die oberste Position des gegebenen Div (einschließlich Rand), d. h. „ 35px „wird gemäß der angegebenen Notiz (am Anfang des Blogs) berechnet und beim Klicken auf die Schaltfläche angezeigt.

Abschluss

JavaScript bietet die „ offsetTop ”-Eigenschaft, um die oberste Position des HTML-Elements relativ zum Ansichtsfenster zu berechnen. Es gibt die berechnete oberste Position eines Elements als ganzzahligen Wert in „ zurück. Pixel “. Dieser Artikel demonstrierte das Ziel, die Verwendung und die Implementierung der HTML-DOM-Element-Eigenschaft „offsetTop“ in JavaScript.

Andere

Kategorie

Beliebte Beiträge

Ansible Ignore-Fehler

So verwenden Sie die Funktion date_sub() in PHP

Was ist Trim String in C#?

Wie fügen Sie CSS mit JavaScript hinzu

Wie kann ich beheben, dass ChatGPT nicht funktioniert?

So finden Sie Hardwaredetails Raspberry Pi GUI

Ist Arduino ein Mikrocontroller?

Git-Fehler „Unterstützung für Passwortauthentifizierung wurde entfernt“.

Welche Tailwind-Dienstprogramme werden zur Steuerung der Platzierung positionierter Elemente verwendet?

Was ist Git Commit Hash und wie wird es verwendet?

Power BI IF-Anweisung: Ein umfassendes Tutorial

Entferne ein Objekt aus einem Array nach seinem Wert in

So laden Sie ein Projekt auf GitHub hoch

So beheben Sie den Bash-Terminal-Fehler: „Bash: Syntaxfehler in der Nähe des unerwarteten Tokens ‚Newline‘“

Wie erstelle ich einen Brauständer in Minecraft?

Konvertieren Sie Array of Starings in Array of Numbers in JavaScript

Was sind VPC-Netzwerkkomponenten?

Wie lösche ich ein Git-Tag in AWS CodeCommit?

Was ist Dateibehandlung in der C-Programmierung?

Wecken Sie ESP32 mit Timers-MicroPython aus dem Tiefschlaf auf