Método innerWidth

O método innerWidth permite obter e alterar a largura de um elemento levando em consideração seus preenchimentos internos. É importante lembrar que obteremos o 'valor calculado' da largura (computed width). Erros de cálculo também podem ocorrer se o usuário alterar o tamanho da página, ou se o elemento ou seu elemento pai estiverem ocultos. O valor da largura não considera a espessura da borda do elemento.

Sintaxe

Obter a largura do elemento. Em alguns casos, os valores obtidos podem ser fracionários:

$(seletor).innerWidth();

Para alterar a largura do elemento - você pode passar apenas um número (por exemplo, 400), então as unidades de medida serão pixels, ou uma string, com a especificação das unidades de medida (por exemplo, '10em'):

$(seletor).innerWidth(novo valor);

Também podemos aplicar uma determinada função a cada elemento no conjunto. Neste caso, o primeiro parâmetro da função receberá o índice do elemento no conjunto, e o segundo parâmetro - o valor atual da largura definida para o elemento específico. O valor this dentro da função irá apontar para o elemento atual. O valor da largura do elemento mudará para aquele retornado pela função:

$(seletor).innerWidth(function(índice no conjunto, valor atual da largura));

Exemplo

Vamos, para comparação, exibir informações sobre a largura do parágrafo #test, obtida pelos métodos width e 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 uma diferença de 10px, que é a soma dos nossos preenchimentos internos esquerdo e direito.

Veja também

método width,
que permite obter e alterar a largura de um elemento
método outerWidth,
que permite obter e alterar a largura de um elemento, considerando seus preenchimentos e borda