jquery
  1. jquery-height
PreviousNext

JQuery height()

The height() method in JQuery is used to get or set the height of an element.

Syntax

To get the height of an element:

$(selector).height()

To set the height of an element:

$(selector).height(value)

Where selector is the HTML element or group of elements you want to target, and value is the height you want to set.

Use

The height() method can be used to retrieve the height of an element and use that value for calculations or other purposes. It can also be used to dynamically set the height of an element based on user interaction or other events.

Example

Here is an example of using the height() method to get the height of an element:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Height Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var height = $(".box").height();
            $("#result").text("Height of box: " + height + "px");
        });
    </script>
    <style>
        .box {
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="result"></div>
</body>
</html>
Try Playground

In this example, we use the height() method to retrieve the height of the .box element and display it in the #result element on the page.

Summary

The height() method in JQuery is a useful tool for retrieving and setting the height of HTML elements on a web page. It can be used for a variety of purposes, and it offers an easy and efficient way to manipulate the look and functionality of a web page dynamically.

width()innerWidth()
Published on: