2013-01-12 18 views
6

Mam ten kod HTML:Zmiana 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> 

I javascript.js mam to:

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; 

Chcę arkuszy stylów zmienić naciskając ten przycisk. Nie mogę zrozumieć, dlaczego to nie działa.

+0

nieco podobny [post] [1], może być pomocne w odpowiedzi na Twój problem [1]: http://stackoverflow.com/questions/13043147/multiple-style-sheets- only-disable-specific-group? rq = 1 – CuriousMind

Odpowiedz

4

Jeden przypuszczenie byłoby brakujące .css właściwość, inny byłby fakt, że onclick nie jest funkcją, ale wynik powoływanie jednego:

aby wszystkie .css ciąg i przypisać funkcje do onclick:

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

Rozwiązał to doskonale! – Benji

2

Przekształć "domyślne" .css w "default.css". Zrób to samo dla pliku dark.css.

Następnie onclick przyjmuje funkcję jako wartość.

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