Foros del Web - Ver Mensaje Individual

emprear · #12 (**permalink**) 20/04/2012, 19:25

Bueno, probé la ultima script de @Melecio, y funciona bien, de todas maneras al hacer la alternancia desde un mismo botón, creo que se le pueden hacer unas mejoras, además le hice un agregado extra, un botón que remueva todos los estilos, optimizaciones, bienvenidas

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar Estilos</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
div.test{
height: 120px;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
box-sizing: border-box; 
padding:0;
margin: 30px;
margin-bottom: 5px;
}
 
h1{
height: 60px;
padding: 0;
margin: 0;
}
div.botones{
padding:0;
margin: 30px;
}
 
button{
width: 250px;
background-color:#9C8D7A;
margin-bottom: 5px;
outline: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var todos = new Array();
function cambiaEstilos(nombre){
var losEstilos=document.getElementsByTagName('link');
if(todos.indexOf(nombre) == -1){
var elCss  = document.createElement('link');
elCss.rel = 'stylesheet'
elCss.type = 'text/css';
elCss.href = nombre + '.css';
document.getElementsByTagName('head')[0].appendChild(elCss);
todos.push(nombre);
document.getElementById(nombre).innerHTML = "Eliminar estilo " + nombre + ".css";
}else{
todos.splice(todos.indexOf(nombre),1);
document.getElementById(nombre).innerHTML = "Agregar estilo " + nombre + ".css";
borrar(nombre);
}
}
 
function borrar(nombre){
var losEstilos=document.getElementsByTagName('link');
for (var i=losEstilos.length; i>=0; i--){
if (losEstilos[i] && losEstilos[i].getAttribute('href')!=null && losEstilos[i].getAttribute('href').indexOf(nombre+'.css')!=-1){
losEstilos[i].parentNode.removeChild(losEstilos[i]); 
}
}
}
 
function borraTodos(){
for (var i=0; i < todos.length; i++ ){
var todos_estilos = todos[i];
borrar(todos_estilos);
document.getElementById(todos_estilos).innerHTML = "Agregar estilo " + todos_estilos + ".css";
}
todos = new Array();
}
 
//]]>
</script>
</head>
<body>
<div class="test">
<h1>Hola</h1>
</div>
<div class="botones">
<!-- parámetros para la función, nombre del archivo css sin extensión -->
<button id="original" onclick="cambiaEstilos('original');">Agregar estilo original.css</button><br />
<button id="background" onclick="cambiaEstilos('background');">Agregar estilo background.css</button><br />
<button id="verde" onclick="cambiaEstilos('verde');">Agregar estilo verde.css</button><br /><br />
<button onclick="borraTodos();">Eliminar todos los estilos</button>
</div>
</body>
</html>

Por si acaso algún distraido, hay que crear los tres archivos de estilos (original.css, verde.css, background.css

Saludos