jQuery - méthode de largeur externe ([margin])

La description

le outerWidth( [margin] ) La méthode obtient la largeur extérieure (inclut la bordure et le remplissage par défaut) pour le premier élément correspondant.

Cette méthode fonctionne pour les éléments visibles et masqués. Il n'est pas pris en charge pour les éléments qui sont indirectement masqués par suite du masquage d'un parent.

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

selector.outerWidth( [margin] )

Paramètres

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

  • margin - Cet argument facultatif lorsqu'il est défini sur true, la marge de l'élément sera incluse dans les calculs.

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

Cela produira le résultat suivant -

jquery-css.htm