<!DOCTYPE html>
<html>
<head>
<!--http://www.lawebdelprogramador.com-->
<title>La Web del Programador - Ejemplo de obtener, agregar y eliminar estilos a un id</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#texto").click(function(){ // Revisamos la clase de css que tiene activa
if($(this).attr("class")=="estilo1") { // eliminamos el estilo "estilo1"
$(this).removeClass("estilo1"); // añadimos el estilo "estilo2"
$(this).addClass("estilo2"); }else if($(this).attr("class")=="estilo2"){ $(this).addClass("estilo1"); }else if($(this).attr("class")=="estilo2 estilo1"){ $(this).removeClass("estilo2"); }
// creamos un disparador...
$(this).trigger("mostrarEstilo"); });
// evento ejecutado con un disparador (trigger)
$("#texto").on("mostrarEstilo",function(){ // Mostramos el estilo actual
$("#mostrarEstilo").html("El estilo actual es -"+$("#texto").attr("class")+"-") });
});
</script>
<style>
.estilo1 {font-weight:bold;} .estilo2 {color:#f00;}
#texto {cursor:pointer;}
#mostrarEstilo {padding-top:30px;}
</style>
</head>
<body>
<h2>La Web del ProgramadorEjemplo de obtener, agregar y eliminar estilos a un id</h2>
<div id="texto" class='estilo1'>pulsa en este texto para cambiar el estilo</div>
<div id="mostrarEstilo">El estilo actual es -estilo1-</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios