Modificando Estilos CSS con jQuery
Con jQuery también podemos modificar los estilos de los elementos de página web. Vamos a ver un ejemplo definiendo primero un color de fondo a la página web. Ya sabes cómo no? Editamos la hoja de estilos llamada estilos.css y le añadimos esta línea:
Si lo guardas y recargas la index.html, verás que el fondo se torna odiosamente verde, je je je (ya me conocéis y sabéis que cuando Dios repartió el buen gusto yo estaba aprendiendo Html y no pillé ni cachito! ja ja ja).
Ahora vamos a añadir una acción más al color de fondo del enlace que nos dirige al foro. Lo haremos dentro del script, dejándolo así:
{
$(".cctw").click(function(evento)
{
alert("Te diriges a una gran página, CCTW!");
});
$(".forocctw").click(function(evento)
{
$(".forocctw").css({"background-color" : "red", "color" : "white" }) ;
alert("Te diriges al foro de CCTW!");
});
});
Invitamos a la fiesta a una acción más que no conocíamos llamada .css. Como ves, el funcionamiento es más o menos como hasta ahora. Si nos fijamos en la línea que acabamos de añadir...
vemos como seleccionamos con el dolar la clase .forocctw y le aplicamos un estilo con la palabra mágica .css seguido de los estilos que queremos aplicarle cuando se haga clic sobre ese elemento. Los estilos se escriben entre los paréntesis de .css y a su vez entre esos corchetes que ves. Luego, una vez dentro de los corchetes, se ponen entre comillas las propiedades a cambiar o añadir y sus valores separados por dos puntos y también entre comillas. Esto es una auténtica pesadez, pero no fui yo quien invento esto! ja ja ja. Es cuestión de hacerse una chuletilla, apuntarlo en alguna parte para acordarse del modo correcto de escribir cada cosa.
Y cuál es la acción que esperamos con esto? Pues que tras hacer clic sobre ese enlace (no sobre el otro, claro) el fondo del vínculo se volverá rojo y el color del texto del enlace blanco. Haz la prueba y lo verás. Esto es una chorrada como un piano de grande, pero nos sirve muy bien para ver de lo que es capaz jQuery (y nosotros!).
Introdución al jQuery:
