jQuery height() Method

jQuery | height() Method: Learn about the jQuery height() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 16, 2022

height() Method

It is very important to know the dimensions of the element that has been placed on the web page. It includes – height, width, innerHeight, innerWidth, etc. For example, the container created, and the images used should have a proper dimension ratio in order to make the web page look more professional. That's why we need to have knowledge of the dimensions over here. So, over here, we'll discuss the height() method in detail.

The height() method helps to set or get the height of the selected element. The element whose dimensions have to be known is passed here as a selector, and this method gives the numerical value of the height. The height() method does not return the height including the padding and margin.

height() Method Syntax

$('selector').height();
$('selector').height(value);

In order to set the height of the element, the value of the height has to be given. This will help to set the height of all the matched elements. If no value is given, then the method will return the height of the first element matched. This way the height() method works in jQuery.

The below example shows the implementation of this method. When the button provided is clicked, it helps to return the height of the image.

jQuery height() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Height</h2>
    <p>Click the button to get the Height of the image.</p>
    <button>Height</button>
    <hr>
    <img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            var width = $('img').height();
            $('h3').html('Height of the Image is: ' + width);
        })
    });
  </script>
</html>

Output:

jQuery width() Method

jQuery innerWidth() Method

Comments and Discussions!

Load comments ↻