Open In App

How to get the width and height of an element in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will find the width and height of an element in jQuery. There are three ways available in jQuery that we can use to find the height and width of an element.

Using the width() and height() methods

The width() and height() methods can be used to find the width of an element using jQuery.

Syntax:

$("element_selector").width()
$("element_selector").height()

Example: The below code example illustrates the use of height() and width() methods to get the height and width of an element.

HTML




<!DOCTYpe html>
<html>
 
<head>
    <title>
        How to get the width and height
        of an element in jQuery?
    </title>
 
    <script src=
    </script>
 
    <style>
        div {
            width: 400px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid green;
        }
    </style>
 
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var div_width =
                $(".div-class").width();
                var div_height =
                $(".div-class").height();
                $("#div-width-height").
                html("Width: " +
                    div_width + ", " +
                    "Height: " + div_height);
            });
        });
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        How to get the width and height
        of an element in jQuery?
    </h3>
 
    <div class="div-class">
        GeeksforGeeks: A computer science portal
    </div>
    <br/>
 
    <button>Get Width/Height</button>
 
    <p id="div-width-height"></p>
</body>
 
</html>


Output:

Using the innerWidth() and innerHeight() methods

The innerWidth() and innerHeight() methods are used to get the height and width including the padding provided in the horizontal and the vertical directions.

Syntax:

$('element_selector').innerWidth();
$('element_selector').innerHeight();

Example: The below example will uses the innerWidth() and innerHeight() methods to get the width an height of element.

HTML




<!DOCTYpe html>
<html>
 
<head>
    <title>
        How to get the width and height
        of an element in jQuery?
    </title>
 
    <script src=
    </script>
 
    <style>
        div {
            width: 400px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid green;
        }
    </style>
 
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var div_width =
                $(".div-class").innerWidth();
                var div_height =
                $(".div-class").innerHeight();
                $("#div-width-height").
                html("Width: " +
                    div_width + ", " +
                    "Height: " + div_height);
            });
        });
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        How to get the width and height
        of an element in jQuery?
    </h3>
 
    <div class="div-class">
        GeeksforGeeks: A computer science portal
    </div>
    <br/>
 
    <button>Get Width/Height</button>
 
    <p id="div-width-height"></p>
</body>
 
</html>


Output:

Using the outerWidth() and outerHeight() methods

The outerWidth() and outerHeight() methods in jQuery are used to get the width and height of an element including the paddings and the border given to it in all the directions.

Syntax:

$('element_selector').outerWidth();
$('element_selector').outerHeight();

Example: The below example implements the outerHeight and outerWidth methods to get the width and height of an element.

HTML




<!DOCTYpe html>
<html>
 
<head>
    <title>
        How to get the width and height
        of an element in jQuery?
    </title>
 
    <script src=
    </script>
 
    <style>
        div {
            width: 400px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid green;
        }
    </style>
 
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var div_width =
                $(".div-class").outerWidth();
                var div_height =
                $(".div-class").outerHeight();
                $("#div-width-height").
                html("Width: " +
                    div_width + ", " +
                    "Height: " + div_height);
            });
        });
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        How to get the width and height
        of an element in jQuery?
    </h3>
 
    <div class="div-class">
        GeeksforGeeks: A computer science portal
    </div>
    <br/>
 
    <button>Get Width/Height</button>
 
    <p id="div-width-height"></p>
</body>
 
</html>


Output:

heiWidGIF

NOTE: The above example includes the border width of the element that is why the width and height are increased.



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads