viernes, 15 de febrero de 2013

Manipular los estilos en cascada desde jQuery

jQuery cuenta con muchos métodos con los que podemos manipular los estilos en cascada o CSS:
  • addClass() - Añade una o más clases a los elementos seleccionados.
  • removeClass() - Remueve una o más clases de los elementos seleccionados.
  • toggleClass() - Alterna entre añadir y remover una clase a los elementos seleccionados.
  • css() - Cambia o regresa el valor de un attributo CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Añadir CSS</title>
<style>
.texto{
    text-align:center;
    color:red;
}
.caja{
    width:300px;
    background-color:#FF9;
    border:solid 2px black;
    height:200px;
}
.autor{
    text-align:right;
    font-style:italic;
    color:black
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#cajaBtn").click(onCaja);
    $("#textoBtn").click(onTexto);
    $("#autorBtn").click(onAutor);
}
function onCaja(){
    $("div").addClass("caja");
}
function onTexto(){
    $("p").addClass("texto");
}
function onAutor(){
    $("#autor").addClass("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"/>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/PoemaCSS.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

No hay comentarios:

Publicar un comentario