Método width

El método width permite obtener y modificar el ancho de un elemento. Es importante recordar que obtendremos el 'valor calculado' del ancho (computed width). A diferencia del método css('width'), este devuelve un valor sin unidades (por ejemplo 400) y es conveniente para cálculos matemáticos. El método obtiene el ancho del contenido del elemento, independientemente de la especificación de la propiedad CSS box-sizing. Para evitar inconvenientes relacionados con esto, se recomienda usar css('width'). También pueden producirse errores en el 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 los valores de los márgenes internos ni del borde.

Sintaxis

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

$(selector).width();

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

$(selector).width(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 establecido para el elemento concreto. El valor this dentro de la función apuntará al elemento actual. El valor del ancho del elemento cambiará al que devuelva la función:

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

Ejemplo

Al hacer clic en el div cambiemos su ancho al valor 40px, usando el método width, y también usando css cambiemos su fondo a 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'
	});
});

Véase también

método height,
que permite obtener y modificar la altura de un elemento
método innerWidth,
que permite obtener y modificar el ancho de un elemento, teniendo en cuenta sus márgenes internos
método outerWidth,
que permite obtener y modificar el ancho de un elemento, teniendo en cuenta sus márgenes y borde
método css,
que permite obtener y modificar los estilos CSS de un elemento