Carica e scarica dinamicamente fogli di stile

Question

Ho cercato vari post e forum ma non riesco a trovare la risposta giusta. Devo trovare un modo per caricare e scaricare dinamicamente i fogli di stile.

Sto costruendo un sito Web che ha un foglio di stile principale e 2 fogli di stile opzionali, per esempio ho intenzione di usare i colori. Devo aggiungere 2 collegamenti, che carica un nuovo foglio di stile al clic. Questo foglio di stile sovrascriverà alcuni degli stili dal foglio di stile principale.

Ad esempio:

Ho un sito web di colore giallo, questo è ciò che la maggior parte delle persone vuole, però ho l'opzione per l'utente a cliccare rosso o blu, quando lo fanno, gli stili del foglio di stile rosso scavalcare gli stili principali e cambiare il sito Web in rosso, se fanno clic su blu questo cambia in blu.

A complicare ulteriormente le cose, se l'utente fa clic rosso e carica il foglio di stile rosso e hanno cambiato idea e adesso voglio blu, ho bisogno del foglio di stile rosso per scaricare e basta caricare l'azzurro.

Non sono molto abile con javascript quindi ho problemi con questo.

Grazie in anticipo!

Answer 1

sono riuscito ad ottenere questo lavoro con un piccolo ritocco di:

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

contenuto del 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

Se stai cambiando solo i colori del div nella tua pagina, vi suggerirei di usare "css" di JQuery.

Con questo si cambia lo stile css sul div o classi con il click di un link.
Di seguito cambia il colore di sfondo di qualsiasi div con la classe "nome_classe" al nero:

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

Per ulteriori informazioni sullo sguardo sintassi di jQuery al loro link qui: http://api.jquery.com/css/

Answer 3

per caricare css dinamicamente

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); 

per scaricare file 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]); 
} 
}