CodesJava

Easy learning with example program codes

jQuery innerHeight()

jQuery innerHeight() method returns the inner height of the selected element. Padding is included in this method but not border and margin.

Syntax:

$(selector).innerHeight() 

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("Inner height of the div is: " + $("div").innerHeight());  
	});  
});  
</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

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 ).innerHeight( modheight ).addClass( "mod" );  
  modheight -= 10;  
});  
</script>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status