Explication détaillée de la méthode position() de jQuery

Explication détaillée de la méthode position() de jQuery_jquery

WBOY

Libérer： 2016-05-16 15:49:39

original

1497 Les gens l'ont consulté

Définition et utilisation de la méthode position() :

Cette méthode obtient le décalage de l'élément correspondant par rapport à un élément.

L'objet renvoyé contient un objet avec deux attributs entiers (en haut et à gauche).

Cette méthode ne fonctionne que sur les éléments visibles.

Structure grammaticale :

$(selector).position()

Copier après la connexion

Au début du tutoriel, la raison pour laquelle il est dit est d'obtenir le décalage de l'élément correspondant par rapport à certains éléments. De nombreux tutoriels indiquent que le décalage renvoyé par la méthode est relatif à l'élément parent, mais ce n'est pas tout à fait vrai. Cette méthode traitera l'élément correspondant avec un positionnement absolu. Bien entendu, cela ne signifie pas que l'élément correspondant est réellement défini sur. positionnement absolu. Le principe de référence offset de la méthode est le suivant :

1. Si l'élément parent n'utilise pas de positionnement (la valeur de l'attribut de position est relative, absolue ou fixe), alors l'objet de référence de décalage est la fenêtre.

2. Si l'un des éléments parents utilise le positionnement, alors l'objet de référence du décalage est l'élément le plus proche qui utilise le positionnement,

Exemple de code :

<!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>

Copier après la connexion

Dans la combinaison supérieure du code ci-dessus, puisque l'élément parent utilise un positionnement relatif, le décalage obtenu est relatif à l'élément parent. Dans la combinaison du bas, puisque l'élément parent n'utilise pas de positionnement, l'objet de référence de décalage est la fenêtre.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.