Código Javascript
:
Ver original<html>
<head>
<link href="estilo1.css" rel="stylesheet" type="text/css" id="linkestilos"/>
<script language="JavaScript">
function cambiarEstilo()
{
estilo = estilo+1;
if (estilo==3){
estilo=1;
link.href = 'estilo1.css'
}else{
link = document.getElementById('linkestilos');
link.href = 'estilo2.css'
}
}
function al_cargar(){
estilo=1;
}
</script>
</head>
<body onload="al_cargar();">
<p class="especial">Este párrafo debería tener texto especial verde</p>
<p><input type="button" name="Submit" value="Cambiar estilo" onclick="cambiarEstilo()"/></p>
</body>
</html>
Código CSS:
Ver original/* estilo1.css */
p.especial {
color : green;
border: solid red;
}
Código CSS:
Ver original/* estilo2.css */
p.especial {
color : blue;
border: solid yellow;
}
-----
La version mas compacta:
Código Javascript
:
Ver original<html>
<head>
<link href="estilo1.css" rel="stylesheet" type="text/css" id="linkestilos"/>
<script language="JavaScript">
function cambiarEstilo()
{
estilo = document.getElementById('linkestilos');
if (estilo.getAttribute('href')=='estilo1.css')
estilo.setAttribute('href','estilo2.css');
else
estilo.setAttribute('href','estilo1.css');
}
</script>
</head>
<body onload="al_cargar();">
<p class="especial">Este párrafo debería tener texto especial verde</p>
<p><input type="button" name="Submit" value="Cambiar estilo" onclick="cambiarEstilo()"/></p>
</body>
</html>
Con los mismos estilos