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:

• jQuery animate(): Animaciones modificando estilos CSS
• jQuery height(): Modificar y obtener la altura de los elementos
• jQuery innerWidth() y outerWidth(): Obtener el ancho de elementos
• jQuery innerHeight() y outerHeight(): Obtener la altura de elementos
• Obtener el ancho y alto de elementos con jQuery
• jQuery offset(): Obtener o establecer las coordenadas de un elemento

Sintaxis de jQuery width()

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

$(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');
 }); 
});

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>

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);
 }); 
});

En el código superior:

• detectamos el click en el inputo con id = boton.
• Modificamos el ancho a 30 pixels del elemento div con id = elemento.

El código HTML del ejemplo es mismo del ejemplo anterior.