feed twitter facebook LinkedIn facebook

jQuery » Modificar el estilo con jQuery

enero 24, 2009 por Víctor Cuervo 7 Comentarios Imprimir Imprimir

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.  
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , , , , , , ,

Artículos relacionados:

7 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Mónica Baquerizo
    febrero 5, 2010 #

    Un 10 por tu aporte, gracias

  2. lineadecodigo
    febrero 6, 2010 #

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

  3. Gabriel
    febrero 23, 2010 #

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

  4. Uhgo
    abril 18, 2011 #

    Gracias :)

  5. ariel
    diciembre 5, 2012 #

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

  6. Víctor Cuervo
    diciembre 12, 2012 #

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

  7. hevelmo
    junio 6, 2013 #

    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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*