jQuery - método de ancho exterior ([margin])

Descripción

los outerWidth( [margin] ) El método obtiene el ancho exterior (incluye el borde y el relleno de forma predeterminada) para el primer elemento coincidente.

Este método funciona tanto para elementos visibles como ocultos. No es compatible con elementos que están indirectamente ocultos como consecuencia de la ocultación de un padre.

Sintaxis

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

selector.outerWidth( [margin] )

Parámetros

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

margin - Este argumento opcional cuando se establece en verdadero, el margen del elemento se incluirá en los cálculos.

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 color = $(this).css("background-color");
               var width = $(this).outerWidth( true );
               $("#result").html("Outer Width is <span>" + width + "</span>.");
               $("#result").css({'color': color, 'background-color':'gray'});
            });
				
         });
      </script>
		
      <style>
         #div1{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
         #div2 { margin:15px;padding:5px; border:5px solid #666; width:60px;}
         #div3 { margin:20px;padding:4px; border:4px solid #666; width:60px;}
         #div4 { margin:5px;padding:3px; border:3px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square:</p>
      <span id = "result"> </span>
		
      <div id = "div1" style = "background-color:blue;"></div>
      <div id = "div2" style = "background-color:pink;"></div>
      <div id = "div3" style = "background-color:#123456;"></div>
      <div id = "div4" style = "background-color:#f11;"></div>
   </body>
</html>

Esto producirá el siguiente resultado:

jquery-css.htm

↰ Previous page