Analyse de la différence entre offset() et position() dans Jquery

Analyse de la différence entre offset() et position() dans Jquery_jquery

WBOY

Libérer： 2016-05-16 16:15:30

original

1194 Les gens l'ont consulté

Cet article analyse la différence entre offset() et position() dans Jquery à travers des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. offset() dans Jquery

Obtenir le décalage relatif de l'élément correspondant dans la fenêtre actuelle. La position est toujours calculée par rapport au document, quel que soit l'attribut position de l'élément parent ou ancêtre de l'élément.
L'objet renvoyé contient deux propriétés entières : top et left. Cette méthode ne fonctionne que sur les éléments visibles.

Par exemple :

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

Copier après la connexion

2. position() dans Jquery

Obtenir le décalage de l'élément correspondant par rapport à l'élément parent. Plus généralement, il s'agit de la position de l'élément parent ou de l'élément ancêtre le plus proche de l'élément contenant position:relative. Si aucun élément parent ou ancêtre n'est trouvé, la position est calculée par rapport au document (c'est-à-dire le coin supérieur gauche de la fenêtre). L'objet renvoyé contient deux propriétés entières : top et left. Pour des calculs précis, utilisez des unités de pixels pour les propriétés de remplissage, de bordure et de remplissage.

Par exemple :

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

Copier après la connexion

3. La différence entre offset() et position()

1. La méthode offset() obtient le décalage relatif de l'élément correspondant dans la fenêtre actuelle. La fenêtre ici fait référence à la fenêtre de la page actuelle, à l'exclusion de la barre de menus du navigateur, etc. Bien sûr, nous n'avons pas besoin d'utiliser jquery pour contrôler l'ensemble du navigateur. Ce que nous voulons contrôler, c'est la fenêtre de la page.

2. La méthode position() obtient le décalage de l'élément correspondant par rapport à l'élément parent. Autrement dit, ce qui est obtenu est le décalage de l'élément par rapport à l'élément parent le plus proche avec un positionnement absolu ou relatif. Si tous les éléments parents sont dans le mode de positionnement statique par défaut, la méthode de traitement est la même que offset(), qui est le décalage de la fenêtre actuelle.

3. Lors de l'utilisation de la méthode position(), si tous ses éléments parents sont dans le mode de positionnement (statique) par défaut, la méthode de traitement est la même que offset(), qui est le décalage relatif de la fenêtre actuelle

4. En utilisant la méthode offset(), peu importe la façon dont l'élément est positionné ou son élément parent est positionné, le décalage de l'élément par rapport à la fenêtre actuelle est obtenu.

5. Dans des circonstances normales, si l'élément B à afficher est stocké sous le même élément parent de l'élément A (c'est-à-dire que B est un nœud frère de A), il est plus approprié d'utiliser position() à ce stade. time ; si l'élément B à afficher est stocké en haut ou en bas du DOM (c'est-à-dire que son élément parent est le corps). À ce stade, il est préférable d'utiliser offset().

J'espère que cet article sera utile à la programmation jQuery de chacun.