2013-01-12 16 views
6

ho ottenuto questo codice HTML:Cambio Style Sheet javascript

<head> 
    <script type="application/javascript" src="javascript.js"> 
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <button id="stylesheet1" > Default Style Sheet </button> 
    <button id="stylesheet2" > Dark Style Sheet </button> 
</body> 

E in javascript.js ho ottenuto questo:

function swapStyleSheet(sheet) { 
    document.getElementById("pagestyle").setAttribute("href", sheet); 
} 

function initate() { 
    var style1 = document.getElementById("stylesheet1"); 
    var style2 = document.getElementById("stylesheet2"); 

    style1.onclick = swapStyleSheet("default".css); 
    style2.onclick = swapStyleSheet("dark".css); 
} 

window.onload = initate; 

voglio i fogli di stile per cambiare mentre premendo questo pulsante. Non riesco a capire perché non funziona.

+0

Un po 'simile [post] [1], può essere utile per rispondere alla tua problema [1]: http://stackoverflow.com/questions/13043147/multiple-style-sheets- only-disable-specific-group? rq = 1 – CuriousMind

risposta

4

Una congettura sarebbe il .css proprietà mancante, un altro sarebbe il fatto che onclick non è una funzione, ma un risultato di invocare uno:

Apportare tutte .css una stringa e assegnare le funzioni a onclick:

style1.onclick = function() { swapStyleSheet("default.css") }; 
style2.onclick = function() { swapStyleSheet("dark.css"); }; 
+0

Risolto perfettamente! – Benji

2

Trasforma "default" .css in "default.css". Fai lo stesso per dark.css.

Quindi onclick assume una funzione come valore.

style1.onclick = function() { swapStyleSheet("default.css") }; 
style2.onclick = function() { swapStyleSheet("dark.css") };