Remover los estilos de un elemento con jQuery
Otro método que nos va a hacer de mucha utilidad es poder eliminar clases completas de un elemento del documento DOM, ya sea en tiempo de ejecución o en tiempo de autor. Para ello utilizamos el método removeClass().<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Borrar Clases</title>
<style>
.texto{
text-align:center;
}
.rojo{
color:red;
}
.autor{
text-align:right;
font-style:italic;
color:black;
}
.caja{
width:300px;
background-color:#FF9;
border:solid 2px black;
height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
$("#cajaBtn").click(onCaja);
$("#autorBtn").click(onAutor);
$("#textoBtn").click(onTexto);
$("#borrarBtn").click(onBorrar);
$("#rojoBtn").click(onRojo);
}
function onCaja(){
$("div").addClass("caja");
}
function onAutor(){
$("#autor").addClass("autor");
}
function onTexto(){
$("p").addClass("texto rojo");
}
function onRojo(){
$("p").removeClass("rojo");
}
function onBorrar(){
$("p").removeClass("texto rojo");
$("div").removeClass("caja");
$("#autor").removeClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
<input type="button" value="Borrar estilo" id="borrarBtn"/>
<input type="button" value="Quitar rojo" id="rojoBtn"/>
</body>
</html>
Ejemplo: http://pacoarce.com/jQuery/BorrarClases.html
Curso completo: https://www.udemy.com/jquery-y-mobile/
No hay comentarios:
Publicar un comentario