Modificar el estilo con jQuery

Como ya sabemos, jQuery nos permite modificar el DOM de una página web de una forma sencilla. Una de las cosas que nos deja modificar de forma sencilla son los estilos CSS de los elementos.

Crear el Párrafo

Lo primero que vamos a hacer es crear un párrafo con texto. A posteriorí, dinámicamente, cambiaremos el color del texto, su tamaño, el color de fondo,… vamos, modificar el estilo con jQuery.

Pongamos el párrafo en HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper sem a justo. Aenean metus. Quisque eu purus at leo vehicula laoreet. Aenean et libero. Curabitur rhoncus erat non quam. Sed sodales fringilla diam. Nulla velit sapien, fringilla elementum, ultrices nec, fringilla id, erat. Morbi at nibh eget justo molestie mattis. Ut eleifend dapibus ante. Sed vitae risus in est suscipit congue. Mauris suscipit ligula at lectus.</p>

Añadir el Botón

Además añadiremos un botón, que será el que nos permita modificar el estilo con jQuery. Es importante darle al botón un id, ya que jQuery utilizará el id para asignarle la funcionalidad.

<button id="cambiar">Cambiar estilo</button>

Cargar la Librería jQuery

Ahora cargaremos la librería jQuery.

<script src="jquery-1.3.1.js" type="text/javascript"></script>

Función Ready

El código jQuery lo vamos a poner dentro de su función ready. Hay que recordar que la función ready es la que se empieza a ejecutar cuando tenemos cargada toda la página.

$(document).ready(function(){
 ...
});

Asignar el Evento Click

Mediante la función $() accedemos al botón de la página. Para ello pasamos como parámetro el id del botón precedido de una almohadilla (#). El evento que disparará el resto del código será click.

$("#cambiar").click(function() {...}

Modificar el Estilo con .css()

Ya solo nos queda poner el código que nos permite modificar el estilo con jQuery. Esto lo conseguimos con la función .css(). Esta función nos permite pasarle por parámetro los atributos CSS que queremos modificar.

$("p").css({'color':'red','font-size':'1.3em','background':'yellow'});

Hay que ver tanto los atributos CSS como los valores asignados van entre comillas.

Código Completo

El código para modificar el estilo con jQuery completo sería:

<script type="text/javascript">
$(document).ready(function(){
 $("#cambiar").click(function() {
   $("p").css({'color':'red','font-size':'1.3em','background':'yellow'});
   });

});
</script>