CodesJava

Easy learning with example program codes

jQuery outerHeight()


jQuery innerHeight() method returns the inner height of the selected element. Border and padding both are included in this method.

Syntax:

$(selector).outerHeight(includeMargin)  

includeMargin: This parameter accepts Boolean value to specify whether the margin is to include or not.

  • False: Not to include the margin.
  • True: To include the margin.

 

Example 1

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
	$("button").click(function(){  
      	alert("Outer height of the div is: " + $("div").outerHeight());  
	});  
});  
</script>  
</head>  
<body>  
<div style="height:100px;width:500px;padding:5px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>  
<button>Height</button>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  div {  
	width: 60px;  
  	padding: 10px;  
  	height: 100px;  
  	float: left;  
  	margin: 5px;  
  	background: orange;  
  	cursor: pointer; 
  }  
  .mod {  
	background: turquoise;  
	cursor: default;  
  }  
  </style>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
</head>  
<body>  
<div>Tall</div>  
<div>Small</div>  
<div>Smaller</div>  
<div>Smallest</div>  
 
<script>  
var modheight = 100;  
$( "div" ).one( "click", function() {  
  $( this ).outerHeight( modheight ).addClass( "mod" );  
  modheight -= 10;  
});  
</script>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki