jQuery height() with Examples


The height() method in jQuery is used to set or return the height of the selected elements. It does not include padding, border, or margin.

Syntax

The syntax is as follows −

$(selector).height()
$(selector).height(val)

Above, Val in the 2nd syntax is used to specify the height in px, em, pt, etc.

Example

Let us now see an example to implement the jQuery height() method

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("button").click(function(){
         document.getElementById("demo").innerHTML = "<br>Height of DIV = " + $("div").height()
      });
   });
</script>
</head>
<body>
<h2>Rectangular Box</h2>
<div style="height:200px;width:500px;padding:30px;margin:1px;background-color:blue;"></div><br>
<button>Height of div</button>
<p id="demo"></p>
</body>
</html>

Output

This will produce the following output−

Click “Height of div”−

Updated on: 30-Dec-2019

113 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements