viernes, 12 de agosto de 2011

JQuery CSS

Hola a todos!!
Vamos a cambiar el estilo css de un elemento cualquiera de una página html!!

Lo más importante es que el elemento en cuestión esté vinculado a una clase css, si no es así, la función css no tendrá efecto.

Por ejemplo vamos a cambiar el color del texto de un div y a ponerlo en negrita al clicar sobre él:
Para ello es necesario crear primero la clase que asignaremos al div:

<style type='text/css'>
.classA{
color: #01587B;
}
</style>

Para crear el div, como siempre, para que podamos seleccionar el div con facilidad le asignaremos una id, en este caso "clic", y le asignamos la class css "classA":

<div id="clic" class="classA">Click!</div>

Ahora desde cualquier función javascript, podemos cambiar el color del texto que contiene el div y ponerlo en negrita mediante la siguiente función:

$('#clic').css({'color':'#017B13', 'font-weight':'bold'});

Como vemos el parámetro de la función css, es un array de pares (atributo, valor), y la sintaxis es la siguiente:
{'atributocss1':'valor', 'atributocss2':'valor', 'atributocss3,'valor'}

Lo mejor de esta función Jquery es que es cross-browser, funciona en todos los navegadores, a diferencia de la función addClass, que en algunos navegadores no funciona.

$('#id').addClass("classB");

Eso es todo! un saludo!

No hay comentarios:

Publicar un comentario