<!DOCTYPE html>
<html>
<head>
<title>Cambiar Estilo con Clase</title>
<style type="text/css">
* {
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
transition:all .4s;
}
body {
margin:100px;
font-size:80%;
font-family:sans-serif;
background-color:#FFFFFF;
}
.aspect1 {
padding:10px;
font-size:10px;
border:#DDDDDD 2px solid;
background-color:#D4D4D4;
}
.aspect2{
width:200px;
padding:10px;
font-size:12px;
border:#F4F4F4 4px solid;
background-color:#F4D4D4;
}
</style>
<script type="text/javascript">
function test(id) {
var elem=document.getElementById(id);
if (elem.className=="aspect1") {elem.className="aspect2"}
else {elem.className="aspect1"}
}
</script>
</head>
<body>
<p><a href="javascript:test('styles')">Cambiar</a></p>
<div id="styles" class="aspect1">
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática...</p>
</div>
</body>
</html>