Modificar el estilo con jQuery

24/ene/2009 jQuery , , 7 Comentarios
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.

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:

  1. <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>

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.

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

Ahora cargaremos la librería jQuery.

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

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.

  1.  
  2. $(document).ready(function(){
  3. ...
  4. });
  5.  

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.

  1.  
  2. $("#cambiar").click(function() {...}
  3.  

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.

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

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

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

  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $("#cambiar").click(function() {
  5. $("p").css({'color':'red','font-size':'1.3em','background':'yellow'});
  6. });
  7.  
  8. });
  9. </script>
  10.  

Vídeos sobre jQuery

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

7 comentarios en “Modificar el estilo con jQuery”

Víctor Cuervo

hevelmo

olle muy bueno lo cale y jalo OK, tengo una pregunta, bueno primero es que no he logrado hacer que funcione, ahora pregunta, como puedo cambiar por ejemplo un textarea que al momento de darle click para escribir , se tranforme a una vista mas dinamicaa como ejemplo el campo de publicacion de noticia de google+ con jquery? tal vez sea mucho edir pero quesiera aprender a hacer un efecto de transicion o transformacion de estilos y vista de un campo como un textarea en jquery.
muchas gracias por compartir tu conocimiento

Víctor Cuervo

Víctor Cuervo

@ariel,

Si quieres hacerlo con javascript lo tienes en http://lineadecodigo.com/javascript/cambiar-el-tamano-de-la-imagen-de-forma-dinamica/ y si quieres hacerlo con jquery te puede servir http://lineadecodigo.com/jquery/animar-elementos-con-jquery/

Espero que te orienten.

Saludos.

Víctor Cuervo

ariel

como puedo modificar el tamaño de mi pasador de fotos jquery??? he intentado pero no logro poder tocar el tamaño para agrandarlo.

Víctor Cuervo

Uhgo

Gracias :)

Víctor Cuervo

Gabriel

Este ejemplo lo has probado en IE 7 y IE 6??
Porque yo he tenido problemas al hacerlo con esos navegadores.

Víctor Cuervo

lineadecodigo

Mónica, me alegro que te haya servido. :-)

Víctor Cuervo

Mónica Baquerizo

Un 10 por tu aporte, gracias

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*