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()
<!-- 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>
No hay comentarios:
Publicar un comentario