domingo, 20 de mayo de 2012

Estilos css con addClass y removeClass Jquery



Estilos css con addClass y removeClass Jquery

En esta ocasión vamos a ver estas dos funciones que bien nos ayudarán a aplicar o eliminar estilos css a un elemento mediante una clase ya definida.

El concepto es el siguiente... crear una o mas clases para dependiendo del momento poder hacer uso de ellas en un determinado momento. Por ejemplo veamos estas dos clases a las cuales le aplicaremos estilos css.

<style type="text/css">
.selected {color: white;}
.fondo {background-color: blue;}
</style>

hemos declarado dos clases que aun no entran en juego, estas clases serán llamadas a partir de la función addClass de Jquery y entonces sí, entrarán en juego.

Suponiendo que tenemos la siguiente caja...

<div id="caja">Hola</div>

¿Cómo podríamos aplicar las dos clases creadas en esta caja?...

$("#caja").addClass("selected fondo");

Así de sencillo añadimos los estilos de las dos clases a este div...

¿Y cómo eliminar las clases?

$("#caja").removeClass("selected fondo");

Y listo con removeClass hemos quitado los estilos css de las dos clases.

Para verlo más claro haz click en el siguiente botón...
Usando las funciones addClass() y removeClass()


El código de este ejemplo es el siguiente...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<style type="text/css">
.selected {color:white; }
.fondo { background-color: blue;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").toggle(function(){
$("#caja").addClass('selected fondo')}
,function() {
$("#caja").removeClass('selected fondo');
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="addClass y removeClass">
<div id="caja">
Usando las funciones addClass() y removeClass()</div>
</body>
</html>