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:
