jQuery - OutsideHeight ([margin]), méthode

La description

le outerHeight( [margin] ) La méthode obtient la hauteur 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.outerHeight( [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 height = $(this).outerHeight();
               $("#result").html("Outer Height is <span>" + height + "</span>.");
               $("#result").css({'color': color, 'background-color':'gray'});
               $("#result").height( height );
            });
				
         });
      </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