How to use the width() and height() methods In JQuery
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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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;"> w3wiki </h1> <h3> How to get the width and height of an element in jQuery? </h3> <div class="div-class"> w3wiki: A computer science portal </div> <br/> <button>Get Width/Height</button> <p id="div-width-height"></p></body></html> |
Output:
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. There are three ways available in jQuery that we can use to find the height and width of an element.
Table of Content
- Using the width() and height() methods
- Using the innerWidth() and innerHeight() methods
- Using the outerWidth() and outerHeight() methods