jQuery - méthode offset ()

La description

le offset( ) La méthode obtient le décalage actuel du premier élément correspondant, en pixels, par rapport au document.

L'objet renvoyé contient deux propriétés Float, en haut et à gauche. Les navigateurs arrondissent généralement ces valeurs au pixel entier le plus proche pour le positionnement réel. La méthode fonctionne uniquement avec les éléments visibles.

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

selector.offset( )

Paramètres

Voici la description de tous les paramètres utilisés par cette méthode -

  • NA

Exemple

Voici un exemple simple montrant l'utilisation de cette méthode -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			
            $("div").click(function () {
               var offset = $(this).offset();
               $("#lresult").html("left offset: <span>" + offset.left + "</span>.");
               $("#tresult").html("top offset: <span>" + offset.top + "</span>.");
            });
				
         });
      </script>
		
      <style>
         div { width:60px; height:60px; margin:5px; float:left; }
      </style>
   </head>
	
   <body>
      <p>Click on any square:</p>
      <span id = "lresult"> </span>
      <span id = "tresult"> </span>
		
      <div style = "background-color:blue;"></div>
      <div style = "background-color:pink;"></div>
      <div style = "background-color:#123456;"></div>
      <div style = "background-color:#f11;"></div>
   </body>
</html>

Cela produira le résultat suivant -

jquery-css.htm