How to get the width and height of an element in jQuery ?
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: In this example, we are using the above-explained method,
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:
Please Login to comment...