Dynamicznie ładuj i usuwaj arkusze stylów

Question

Przeszukałem różne posty i fora, ale nie mogę znaleźć właściwej odpowiedzi. Muszę znaleźć sposób na dynamiczne ładowanie i usuwanie arkuszy stylów.

buduję stronę internetową, która ma główny arkusz stylów oraz 2 opcjonalne arkusze stylów, na przykład celów zamierzam używać kolorów. Muszę dodać 2 linki, które ładują nowy arkusz stylów po kliknięciu. Ten arkusz stylów zastąpi niektóre style z głównego arkusza stylów.

Na przykład:

mam żółtą stronę internetową, to jest to, co większość ludzi chce jednak mam opcję dla użytkownika do kliknięcia na czerwono lub niebiesko, gdy robią, style w czerwonym stylów przesłonić główne style i zmienić stronę na czerwony, jeśli klikną na niebiesko, to zmieni się na niebieski.

Aby jeszcze bardziej komplikować sytuację, jeśli użytkownik kliknie na czerwono i załaduje czerwony arkusz stylów, a oni zmienili zdanie, a teraz oczekują niebieskiego, potrzebuję czerwonego arkusza stylów do rozładowania i załadowania niebieskiego.

Nie jestem bardzo biegły w javascript, więc mam problemy z tym.

Z góry dziękuję!

Answer 1

udało mi się dostać ten pracuje z niewielką szczypanie:

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

zawartość 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

Jeśli tylko zmienia kolory div na stronie, chciałbym zaproponować za pomocą jQuery za „.css”.

Z tego zmieniać style CSS na DIV lub klas za pomocą kliknięcia w link.
Następujące zmiany koloru tła każdej div z klasą „CLASS_NAME” na czarno:

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

Aby uzyskać więcej informacji na temat składni wygląd jquery w ich link tutaj: http://api.jquery.com/css/

Answer 3

załadować CSS dynamicznie

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

Aby Rozładowanie plik 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]); 
} 
}