En este artículo encontraremos el ancho y el alto de un elemento en jQuery. Para encontrar el ancho y la altura de un elemento, se utilizan los métodos width() y height(). El método width() se usa para verificar el ancho de un elemento. No comprueba el relleno, el borde y el margen del elemento. El método height() se usa para verificar la altura de un elemento, pero no verificará el relleno, el borde y el margen del elemento.
Sintaxis:
$("param").width() $("param").height()
Ejemplo:
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;"> 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>
Producción: