Podemos obtener el ancho interno de cualquier elemento usando el método jQuery innerWidth() . El método innerWidth() devuelve el ancho interior del primer elemento coincidente, incluido el relleno pero no el borde.
Sintaxis:
$(selector).innerWidth()
Entonces, el ancho interno de un elemento se muestra en la imagen a continuación.
Ancho interior
El ancho interno de un elemento es la suma del ancho de un elemento y el relleno alrededor de ese elemento. No incluimos Borde y Margen al calcular el ancho interior de cualquier elemento.
Ejemplo: El siguiente ejemplo demuestra el ancho interno del elemento » p» de HTML mediante el uso del evento de clic de botón .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript">
</script>
</head>
<body>
<p>Hello</p>
<button>Click to know the inner width of p tag</button>
<script>
$("button").click(function () {
$("p").text("Inner Width : " + $("p").innerWidth());
});
</script>
</body>
</html>
Producción:
al hacer clic en obtener ancho interior