El ancho() es una función incorporada en JavaScript que se usa para verificar el ancho de un elemento. No comprueba el relleno, el borde y el margen del elemento.
Sintaxis:
$("param").width()
Parámetros: aquí el parámetro es «param», que es la clase o id del elemento cuyo ancho se va a extraer.
Valores devueltos: Devuelve el ancho del elemento seleccionado.
Código #1:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery
/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var msg = "";
msg += "Width of div: " + $("#demo").width();
$("#demo").html(msg);
});
});
</script>
<style>
#demo {
height: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="demo"></div>
<button>Click Me!!!</button>
<p>Click on the button and check the width of the
element (excluding padding).</p>
</body>
</html>
Salida:
antes de hacer clic en el botón, 
después de hacer clic en el botón, 
jQuery también incluye el método innerWidth() , es decir, también se usa para verificar el ancho interno del elemento, incluido el relleno.
Sintaxis:
$("param").innerWidth()
Parámetros: Aquí el parámetro “param” es la clase o id del elemento cuyo ancho se va a extraer.
Valor devuelto: Devuelve el ancho del elemento seleccionado.
Código #2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var msg = "";
msg += "Inner width of div: " + $("#demo")
.innerWidth() + "</br>";
$("#demo").html(msg);
});
});
</script>
</head>
<style>
#demo {
height: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightgreen;
}
</style>
<body>
<div id="demo"></div>
<button>Click Me!!!</button>
<p>Click on the button and check the innerWidth of
an element(includes padding).</p>
</body>
</html>
Antes de hacer clic en el botón- 
Después de hacer clic en el botón-
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA