recherche

Maison >interface Web >js tutoriel >Explication détaillée de la méthode position() de jQuery_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:49:391553parcourir

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()

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>

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode Javascript pour obtenir et définir les compétences position_javascript du curseurArticle suivant：Méthode Javascript pour obtenir et définir les compétences position_javascript du curseur

Articles Liés

Voir plus