Método innerWidth

El método innerWidth permite obtener y modificar el ancho de un elemento teniendo en cuenta sus rellenos internos. Es importante recordar que obtendremos el 'valor calculado' del ancho (computed width). También pueden producirse errores de cálculo si el usuario cambia el tamaño de la página, o si el elemento o su elemento padre están ocultos. El valor del ancho no tiene en cuenta el grosor del borde del elemento.

Sintaxis

Obtener el ancho del elemento. En algunos casos los valores obtenidos pueden ser fraccionarios:

$(selector).innerWidth();

Para cambiar el ancho del elemento - se puede pasar simplemente un número (por ejemplo 400), entonces las unidades de medida serán píxeles, o una cadena, indicando las unidades de medida (por ejemplo '10em'):

$(selector).innerWidth(nuevo valor);

También podemos aplicar una función determinada a cada elemento del conjunto. En este caso, la función recibirá como primer parámetro el índice del elemento en el conjunto, y como segundo parámetro - el valor actual del ancho asignado para el elemento concreto. El valor this dentro de la función apuntará al elemento actual. El valor del ancho del elemento cambiará por aquel que devuelva la función:

$(selector).innerWidth(function(índice en el conjunto, valor actual del ancho));

Ejemplo

Comparemos mostrando la información sobre el ancho del párrafo #test, obtenido mediante los métodos width y innerWidth:

<p id="test">texto</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Veremos una diferencia de 10px, que es la suma de nuestros rellenos internos izquierdo y derecho.

Véase también

método width,
que permite obtener y modificar el ancho del elemento
método outerWidth,
que permite obtener y modificar el ancho del elemento, teniendo en cuenta sus rellenos y borde