jQuery width(): Modificar y obtener el ancho de los elementos

Post para repasar el método de jQuery width() que sirve para modificar y obtener el ancho de los elementos de la web como puede ser un div, clases o etiquetas.

Antes de ver la sintaxis os pongo unos post con temática similar:

Sintaxis de jQuery width()

Veamos la sintaxis de esta función de jQuery extraída de su web oficial:

$(selector).width()

$(selector).width(valor)

$(selector).width()

$(selector).width(valor)

Os explico las 2 sintaxis:

En la primera sintaxis obtenemos el ancho del elemento especificado en el selector.
La segunda sirve para modificar el ancho del elemento especificado en el selector.

Ejemplo de jQuery width() para obtener el ancho de un div

Vamos con el primer ejemplo de jQuery width() para obtener el ancho de un elemento de la web, en este caso el de un div:

$(document).ready(function(){
 	$("#boton").click(function(){
    		alert('El tamaño del div es: ' + $("#elemento").width() + 'pixels');
	}); 
});

$(document).ready(function(){

$("#boton").click(function(){

alert('El tamaño del div es: ' + $("#elemento").width() + 'pixels');

});

En el código superior:

detectamos el click en el inputo con id = boton.
Mostramos en pantalla con un alert la longitud en pixels del elemento div con id = elemento.

El código HTML del ejemplo es el siguiente:

<div id="elemento">
	<p id="parrafo">Esto es un texto en un párrafo de un div</p>
</div>
<p><input id="boton" type="button" value="Obtener ancho"></p>

<p id="parrafo">Esto es un texto en un párrafo de un div</p>

</div>

Ejemplo de jQuery width() modificar el ancho de un div

Vamos con el segundo ejemplo de jQuery width() para modificar el ancho de un elemento de la web, en este caso el de un div:

$(document).ready(function(){
 	$("#boton").click(function(){
    		$("#elemento").width(30);
	}); 
});