Método width

O método width permite obter e alterar a largura de um elemento. É importante lembrar que obteremos o 'valor calculado' da largura (computed width). Diferente do método css('width'), ele retorna um valor sem unidade (por exemplo 400) e é conveniente para cálculos matemáticos. O método obtém a largura do conteúdo do elemento, independentemente da especificação da propriedade CSS box-sizing. Para evitar inconvenientes relacionados a isso, é recomendado usar css('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 estiver oculto. O valor da largura não considera os valores de preenchimento e borda.

Sintaxe

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

$(seletor).width();

Para alterar a largura do elemento - pode-se passar simplesmente 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).width(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 que a função retornar:

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

Exemplo

Vamos, ao clicar em um div, alterar sua largura para o valor 40px, usando o método width, e também com o css mudar seu fundo para verde:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Veja também

método height,
que permite obter e alterar a altura de um elemento
método innerWidth,
que permite obter e alterar a largura de um elemento, considerando seu preenchimento interno
método outerWidth,
que permite obter e alterar a largura de um elemento, considerando seu preenchimento e borda
método css,
que permite obter e alterar os estilos CSS de um elemento