jQuery - método offset ()

Descripción

los offset( ) El método obtiene el desplazamiento actual del primer elemento coincidente, en píxeles, en relación con el documento.

El objeto devuelto contiene dos propiedades Float, superior e izquierda. Los navegadores generalmente redondean estos valores al píxel entero más cercano para el posicionamiento real. El método funciona solo con elementos visibles.

Sintaxis

Aquí está la sintaxis simple para usar este método:

selector.offset( )

Parámetros

Aquí está la descripción de todos los parámetros utilizados por este método:

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso de este método:

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

Esto producirá el siguiente resultado:

jquery-css.htm

↰ Previous page