2013-01-12 14 views
6

ich HTML-Code bekam:Ändern 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> 

Und in javascript.js Ich habe dies:

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; 

Ich möchte den Stylesheets zu ändern, während diese Tasten drücken. Ich kann nicht herausfinden, warum es nicht funktioniert.

+0

Etwas ähnlich [post] [1], kann hilfreich sein, Ihr Problem [1] zu beantworten: http://stackoverflow.com/questions/13043147/multiple-style-sheets- only-disable-specific-group? rq = 1 – CuriousMind

Antwort

4

Eine Vermutung wäre, die fehlende .css Eigenschaft, wäre ein anderer die Tatsache sein, dass onclick keine Funktion, sondern ein Ergebnis von einem Aufruf:

all .css Erstellen Sie eine Zeichenfolge und Funktionen zuweisen onclick:

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

Gelöst es perfekt! – Benji

2

"Standard" .css in "default.css" umwandeln. Tun Sie dasselbe für dark.css.

Dann nimmt onclick eine Funktion als Wert.

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