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