Foros del Web - Ver Mensaje Individual

emprear · #8 (**permalink**) 19/04/2012, 15:40

Finalmente me quedó asi
todo en una función

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" />
<script type="text/javascript">
//<![CDATA[
 
function cambiaEstilos(nombre,accion){
 
if(accion == 'a'){ // agregar estilos
var elCss  = document.createElement('link');
elCss.rel = 'stylesheet'
elCss.type = 'text/css';
elCss.href = nombre + '.css';
document.getElementsByTagName('head')[0].appendChild(elCss);
}else if(accion == 'r'){ //remover estilos
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])
}
}
 
}
 
//]]>
</script>
</head>
<body>
<h1>Hola</h1>
<!-- parámetros para la función, nombre del archivo css sin extensión, a para agregar, r para remover -->
<button onclick="cambiaEstilos('original','a');">Agregar estilo original.css</button>
<button onclick="cambiaEstilos('original','r');">Eliminar estilo original.css</button>
<button onclick="cambiaEstilos('verde','a');">Agregar estilo verde.css</button>
<button onclick="cambiaEstilos('verde','r');">Eliminar estilo verde.css</button>
</body>
</html>

Testeado en FF / IE9-8-7 / Opera /Chrome
Saludos