Maison > Article > interface Web > Une brève discussion sur la méthode offset() de jQuery et l'exemple Sharing_jquery

Une brève discussion sur la méthode offset() de jQuery et l'exemple Sharing_jquery

WBOYoriginal: 2016-05-16 15:49:57940parcourir

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

Cette méthode renvoie ou définit le décalage de l'élément correspondant par rapport à l'objet document.

Structure grammaticale 1 :

$(sélecteur).offset()
Obtenez le décalage relatif de l'élément correspondant dans le document actuel.
L'objet renvoyé contient deux propriétés entières : top et left.
Cette méthode ne fonctionne que sur les éléments visibles.
Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 border:1px solid black;
 width:400px;
 height:300px;
 padding:10px;
 margin:50px;
}
.children{
 height:150px;
 width:200px;
 margin-left:50px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   a=$(".children").offset();
   alert("元素的偏移量坐标是："+a.top+"|"+a.left+"");
  })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

Le code ci-dessus peut afficher le décalage du sous-div par rapport au document.

Structure grammaticale 2 :

$(sélecteur).offset(valeur)

Définissez les coordonnées de l'élément correspondant par rapport à l'objet document.
La méthode offset() nous permet de réinitialiser la position de l'élément. La position de cet élément est relative à l'objet document.
Si l'attribut de style de position d'origine de l'objet est statique, il sera remplacé par relatif pour implémenter la relocalisation.
Liste des paramètres :

Description du paramètre
value spécifie les coordonnées supérieure et gauche en pixels.

Valeurs possibles :

1. Paire de valeurs, telle que {top:200,left:10}.
2. Objet avec les attributs haut et gauche.

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset({top:100,left:100})
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Le code ci-dessus peut définir le décalage du div par rapport au document.

Structure grammaticale trois :

Utilisez la valeur de retour de la fonction pour définir les coordonnées de décalage :

$(selector).offset(function(index,oldoffset))
Liste des paramètres :

Description du paramètre
function(index,oldvalue) spécifie une fonction qui renvoie les nouvelles coordonnées de décalage de l'élément sélectionné :
index - facultatif. L'index de l'élément.
oldvalue - facultatif. coordonnées actuelles.

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset(function(a,b){
   var newpoint= new Object();
   newpoint.top=b.top+50;
   newpoint.left=b.left+50;
   return newpoint;
  })
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Le code ci-dessus peut également définir le décalage de l'élément, mais la valeur est renvoyée via la fonction.

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：jQuery implémente la méthode d'insertion d'un nouvel élément avant le dernier element_jqueryArticle suivant：jQuery implémente la méthode d'insertion d'un nouvel élément avant le dernier element_jquery

Articles Liés

Voir plus