Nieuw lid |
|
Ik had zelf ook net zoiets nodig en ik heb het gemaakt in javascript 
In de head zet ik mijn beide CSS's (eentje als alternate) en het javascript dat ervoor zorgt dat je van CSS kan wisselen:
<head>
<title>Opdrachten HTML</title>
<link href="css1.css" rel="stylesheet" type="text/css" title="css1"/>
<link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/>
<script type="text/javascript">
function veranderCSS() {
title = document.getElementById("css").value;
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if ((a.getAttribute("rel").indexOf("style") != -1) && (a.getAttribute("title"))) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>
</head>
<head> <title>Opdrachten HTML</title> <link href="css1.css" rel="stylesheet" type="text/css" title="css1"/> <link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/> <script type="text/javascript"> function veranderCSS() { title = document.getElementById("css").value; var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if ((a.getAttribute("rel").indexOf("style") != -1) && (a.getAttribute("title"))) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } </script> </head>
Ergens op die pagina heb ik dan zoiets staan:
<select name="css" id="css" onchange="veranderCSS()">
<option value="css1">Kleurrijk</option>
<option value="css2">Monochrome</option>
</select>
<select name="css" id="css" onchange="veranderCSS()"> <option value="css1">Kleurrijk</option> <option value="css2">Monochrome</option> </select>
Dit is een dropdown box die het bovenstaande scriptje oproept.
De werking van dit scriptje is ook vrij simpel:
- Als eerste stapt zoekt het uit welke CSS je selecteert in je dropdown box;
- Dan zoekt het in een for-lus alle elementen met <link> in;
- Al deze link-elementen zullen dan disabled worden (niet meer werken);
- Als het "title"-attribuut van de <link>-tag overeenkomt met je value van je dropdown, dan zal dit element enabled worden;
Ik hoop dat ik je hiermee geholpen heb  |