Introduction:

In this article we will explain how to get or set height of selected html element in jQuery with example.

Description:

jQuery height() method is used to get or set the height of matched element.

To get height: When this method is used to get the height, it get the height of first matched element.

To set height: When this method is used to set the height, it sets the height for every matched element.

Note: If we pass parameter, it sets the height of the element otherwise it simply get the height of the element.

Example of jQuery height() method

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            $(".div").css("background", "#c7f14e").height("100px");
            $("#span1").text($(".div").height());
        });
    </script>
    <div class="div" style="width:200px;">DIV</div>
  <span> Div height:</span> <span id="span1"></span>
</body>
</html>

 

Output:


Get and set height of element in jQuery

In  Above code snippet will first change the background color and set the height of the “div” tag to 100px.

And it also will show the height of “div” element in span tag.

I hope it will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like