jQuery height()

Introduction

Return the height of a <div> element:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from   w  w w. j  a  v  a  2s  .co m
<script>
$(document).ready(function(){
  $("button").click(function(){
     document.getElementById("demo").innerHTML = 
              "Height of div: " + $("div").height();
  });
});
</script>
</head>
<body>

<p id="demo"></p>
<div style="height:100px;width:300px;padding:10px;margin:3px;background-color:blue;"></div><br>

<button>Display the height of div</button>

</body>
</html>

The height() method sets or returns the height of the selected elements.

As getter, the height() method returns the height of the first matched element.

As setter, the height() method sets the height of all matched elements.

The value of the height() method does not include padding, border, or margin.

Return the height: 

$(selector).height()

Set the height: 

$(selector).height(value)

Set the height using a function: 

$(selector).height(function(index,currentheight))
Parameter
 Optional
 Description
value
 Required for setting height.
 the height in px, em, pt, etc. Default unit is px
function(index,currentheight)


 Optional.


 sets a function that returns the new height of selected elements
index - the index position of the element in the set
currentheight - the current height of the selected element



PreviousNext

Related