suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der position() method_jquery von jQuery

Detaillierte Erläuterung der position() method_jquery von jQuery

WBOY
WBOYOriginal
2016-05-16 15:49:391546Durchsuche

Definition und Verwendung der Methode position():

Diese Methode ermittelt den Offset des übereinstimmenden Elements relativ zu einem anderen Element.

Das zurückgegebene Objekt enthält ein Objekt mit zwei ganzzahligen Attributen (oben und links).

Diese Methode funktioniert nur bei sichtbaren Elementen.

Grammatikstruktur:

$(selector).position()

Zu Beginn des Tutorials wird gesagt, dass es darum geht, den Versatz des passenden Elements relativ zu einigen Elementen zu ermitteln. In vielen Tutorials heißt es, dass der von der Methode zurückgegebene Offset relativ zum übergeordneten Element ist, aber das ist nicht ganz richtig. Diese Methode verarbeitet das übereinstimmende Element mit absoluter Positionierung. Dies bedeutet natürlich nicht, dass das übereinstimmende Element tatsächlich festgelegt ist absolute Positionierung. Das Offset-Referenzprinzip der Methode lautet wie folgt:

1. Wenn das übergeordnete Element keine Positionierung verwendet (der Positionsattributwert ist relativ, absolut oder fest), dann ist das Offset-Referenzobjekt das Fenster.

2. Wenn eines der übergeordneten Elemente die Positionierung verwendet, ist das Referenzobjekt des Offsets das nächstgelegene Element, das die Positionierung verwendet,

Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 background-color:green;
 width:200px;
 height:200px;
 padding:50px;
 margin-bottom:50px;
 margin-left:100px;
}
.children{
 height:150px;
 width:150px;
 background-color:red;
 line-height:150px;
 text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".children").each(function(){
  var text;
  text="left:"+$(this).position().left;
  text+="top:"+$(this).position().top;
  $(this).text(text);
 })
})
</script>
</head>
<body>
<div class="father" style="position:relative">
 <div class="children"></div>
</div>
<div class="father">
 <div class="children"></div>
</div>
</body>
</html>

Da in der oberen Kombination im obigen Code das übergeordnete Element eine relative Positionierung verwendet, ist der erhaltene Versatz relativ zum übergeordneten Element. Da in der unteren Kombination das übergeordnete Element keine Positionierung verwendet, ist das versetzte Referenzobjekt das Fenster.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript-Methode zum Erhalten und Festlegen der Cursorposition_Javascript-KenntnisseNächster Artikel：Javascript-Methode zum Erhalten und Festlegen der Cursorposition_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen