Carga y descarga dinámicamente de las hojas de estilo

Question

He buscado varias publicaciones y foros pero no puedo encontrar la respuesta correcta. Necesito encontrar una manera de cargar y descargar dinámicamente hojas de estilo.

Estoy construyendo un sitio web que tiene una hoja de estilo principal y 2 hojas de estilo opcionales, por ejemplo, voy a usar colores. Necesito agregar 2 enlaces, que carga una nueva hoja de estilo al hacer clic. Esta hoja de estilo sobrescribirá algunos de los estilos de la hoja de estilo principal.

Por ejemplo:

Tengo un sitio web amarillo, esto es lo que la mayoría de la gente quiere, sin embargo, que tengo la opción para que el usuario haga clic en rojo o azul, cuando lo hacen, los estilos en la hoja de estilo de color rojo anula los estilos principales y cambia el sitio web a rojo, si hacen clic en azul esto cambia a azul.

Para complicar las cosas aún más, si el usuario hace clic en rojo y carga la hoja de estilo roja y cambian de opinión y ahora quieren azul, necesito la hoja de estilo roja para descargar y simplemente cargar el azul.

No soy muy competente con JavaScript, así que estoy teniendo problemas con esto.

¡Gracias de antemano!

Answer 1

Logré este trabajo con un poco de ajuste de:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

contenido de la link:

function loadjscssfile(filename, filetype){ 
    if (filetype=="js"){ //if filename is a external JavaScript file 
     var fileref=document.createElement('script') 
     fileref.setAttribute("type","text/javascript") 
     fileref.setAttribute("src", filename) 
    } 
    else if (filetype=="css"){ //if filename is an external CSS file 
     var fileref=document.createElement("link") 
     fileref.setAttribute("rel", "stylesheet") 
     fileref.setAttribute("type", "text/css") 
     fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref!="undefined") 
     document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file 
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file 
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file 

function removejscssfile(filename, filetype){ 
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from 
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for 
    var allsuspects=document.getElementsByTagName(targetelement) 
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove 
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) 
     allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild() 
    } 
} 

removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page 
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page 

Answer 2

Si solo está cambiando los colores de los divs en su página, le sugiero que utilice ".css" de JQuery.

Con esto puede cambiar el estilo css en divs o clases con el clic de un enlace.
El siguiente cambia el color de fondo de cualquier div con la clase "class_name" a negro:

$(".class_name").css("background-color","#000000"); 

Para obtener más información sobre el aspecto sintaxis de jQuery en su enlace aquí: http://api.jquery.com/css/

Answer 3

para cargar dinámicamente CSS

var headID = document.getElementsByTagName("head")[0]; 
var cssNode = document.createElement('link'); 
cssNode.type = 'text/css'; 
cssNode.rel = 'stylesheet'; 
cssNode.href = 'FireFox.css'; 
cssNode.media = 'screen'; 
headID.appendChild(cssNode); 

Descargar fichero css

function removefile(filename, filetype) { 
var targetElement = "link"; 
var targetAttr = "href"; 

var allCtrl = document.getElementsByTagName(targetElement); 
for (var i=allCtrl.length; i>=0; i--) { //search backwards within nodelist for matching elements to remove 
if (allCtrl[i] && allCtrl[i].getAttribute(targetAttr)!=null && allCtrl[i].getAttribute(targetAttr).indexOf(filename)!=-1); 
allCtrl[i].parentNode.removeChild(allCtrl[i]); 
} 
}