Beispiel für JQuery Position() und Offset()

JQuery Position()-Methode

Die Methode position() hilft bei der Rückgabe der Position des ausgewählten Elements im Dokument. Es ruft die Position des Elements relativ zum übergeordneten Offset ab. Es verfügt über zwei Arten von Objekteigenschaften, die die obere und linke Position in Pixeln darstellen. Diese Methode ist nützlich, wenn Sie ein Element in der Nähe eines anderen Elements oder innerhalb desselben Elements positionieren. Diese Methode funktioniert nur mit sichtbaren Elementen; Die Positionierung ausgeblendeter Elemente wird nicht unterstützt.

JQuery Position()-Syntax

$(selector).position();

Beispiel für JQuery Position()

<!doctype html>
<head>
<title>JQuery Position Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Position Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       page_pos=$("h3").position();
         $("#message").text(" Top Position: " + page_pos.top + " Left Position: " + page_pos.left);
     });
   });
</script>
<body>
   <h3>Welcome to JQuery!!!</h3>
   <button>Click to see position of the element</button>
   <p id="message"></p>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • page_pos=$(“h3”).position(); Zeile definiert die Positionsmethode, die die Position des aktuellen Elements im Dokument zurückgibt. Wir speichern den Wert des Elements in der Variablen page_pos.
  • $(“#message”).text(“ Obere Position: ” + page_pos.top + ” Linke Position: ” + page_pos.left); Zeile zeigt die obere und linke Position des angegebenen Elements an, wenn der Benutzer auf die Schaltfläche im Browser klickt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

JQuery-Positionsmethode

JQuery Offset()-Methode

Die Methode offset() hilft bei der Rückgabe der relativen Position für die ausgewählten Elemente in Pixeln. Es verfügt über zwei Arten von Objekteigenschaften, die die obere und linke Position in Pixeln darstellen. Es ermöglicht das Abrufen der Versatzkoordinaten des ersten Elements im Satz übereinstimmender Elemente relativ zum Dokument. Es enthält keine Argumente. Wie die Methode position() funktioniert auch diese Methode nur mit sichtbaren Elementen; Die Positionierung ausgeblendeter Elemente wird nicht unterstützt.

JQuery Offset()-Syntax

$(selector).offset();

Beispiel für JQuery Offset()

<!doctype html>
<head>
<title>JQuery Offset Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Offset Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       offset_pos=$("h3").offset();
       $("#message").text(" Top : " + offset_pos.top + ", Left : " + offset_pos.left);
      });
   });
</script>
<body>
   <h3>Welcome to JavaBeat!!!</h3>
   <button>Click to see position of the element</button>
   <p id="message"></p>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • offset_pos=$(“h3”).offset(); Zeile definiert die Methode offset(), die den aktuellen Offset für die ausgewählten Elemente in Pixel zurückgibt.
  • $(“#message”).text(“ Top : ” + offset_pos.top + “, Left : ” + offset_pos.left); Zeile zeigt die obere und linke Position des angegebenen Elements an, wenn der Benutzer auf die Schaltfläche im Browser klickt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

JQuery-Offset-Methode

Wir können auch Offset-Koordinaten eines Elements festlegen. Es hat folgende Syntax:

$(selector).offset({top:value, left:value})

Beispiel:

<!doctype html>
<head>
<title>JQuery Offset Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Offset Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       $("h3").offset({top:200,left:250});
      });
   });
</script>
<body>
   <h3>Welcome to JQuery!!!</h3>
   <button>Click to see position of the element</button>
</body>
</html>
 

Wie im obigen Beispiel gezeigt, stellen wir die Versatzkoordinaten manuell ein. Wenn wir auf die Schaltfläche im Browser klicken, erhalten wir „Willkommen bei JQuery!!!“ Linie wie in den Offsetkoordinaten angegeben.

Wenn Sie das obige Beispiel für Offset-Koordinaten ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

OffsetMethod1

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen