Skip to content
Related Articles

Related Articles

How to get the width and height of an element in jQuery ?
  • Last Updated : 24 Mar, 2021

In this article, we will find the width and height of an element in jQuery. To find the width and height of an element, width() and height() methods are used. The width() method is used to check the width of an element. It does not check the padding, border and margin of the element. The height() method is used to check the height of an element but it will not check the padding, border and margin of the element.

Syntax:

$("param").width()
$("param").height()

Example:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :