jQuery height() with Examples

jQueryWeb DevelopmentFront End Technology

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”−

raja
Published on 30-Dec-2019 13:48:22
Advertisements