Prova così. Non ho fatto altro che imitare il comportamento del browser qualora l'utente utilizzasse il menu nativo del browser, di modo che lo script sia sempre sincronizzato con questo.
Pagina HTML:
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<link href="static.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
<script type="text/javascript">
function chooseStyleSheet(sTitle) {
for (var iStyleSheetId = 0; iStyleSheetId < document.styleSheets.length; iStyleSheetId++) {
iStyleSh = document.styleSheets[iStyleSheetId];
if (iStyleSh.title) { iStyleSh.disabled = iStyleSh.title !== sTitle; }
}
}
</script>
</head>
<body>
[ <span class="intLink" onclick="chooseStyleSheet('Default Style');">Default Style</span> | <span class="intLink" onclick="chooseStyleSheet('Fancy');">Fancy</span> | <span class="intLink" onclick="chooseStyleSheet('Basic');">Basic</span> ]</p>
<span class="classeEsempio">Testo di esempio</span>
</body>
</html>
static.css:
codice:
.intLink {
text-decoration: underline;
color: #0000ff;
cursor: pointer;
}
defult.css:
codice:
.classeEsempio {
color: inherit;
text-decoration: none;
font-style: normal;
font-size: small;
}
fancy.css:
codice:
.classeEsempio {
color: red;
text-decoration: none;
font-style: italic;
}
basic.css:
codice:
.classeEsempio {
color: inherit;
text-decoration: none;
font-style: normal;
}
In questo esempio gli unici elementi a cambiare stile a ogni switch sono quelli con class="classeEsempio", ma puoi estendere i fogli di stile a tuo piacimento. Ricordati che puoi avere infiniti tag <link> con attributo rel uguale a stylesheet, ma purché i tag in questione non abbiano anche l'attributo title settato! Mentre invece tra quelli che fanno uso dell'attributo title, uno solo può (anzi, deve) avere l'attributo rel uguale a stylesheet, mentre gli altri devono avere l'attributo rel uguale a alternate stylesheet! Chiaro? 
P.S. Ovviamente lo switch sarà eseguito solo tra fogli di stile con attributo title...
Rispondi quotando
Prova così:
