- Codice: Seleziona tutto
// La funzione per cambiare i fogli di stile
function templateChange(){
//controllo browser
if(!document.styleSheets){
var ss = getAllSheets() //Opera
}else{
var ss = document.styleSheets; //Dom
}
// disabilita tutti i fogli di stile con un titolo
// tranne quello passato per argomento alla funzione
for( var x = 0; x < ss.length; x++ ) {
if( ss[x].title ) {
ss[x].disabled=true;
}
for( var y = 0; y < arguments.length; y++ ) {
//controlla ogni titolo ...
if(ss[x].title == arguments[y]){
//e riabilita il foglio di stile se ha il titolo scelto
ss[x].disabled=false;
}
}
}
if( !ss.length ) {
alert( 'Il tuo browser non è abilitato a cambiare i fogli di stile CSS' );
}
}
// ---------------------------------------------------------------------------------
// Funzione per Opera
function getAllSheets(){
if( document.getElementsByTagName ) {
var Lt = document.getElementsByTagName('LINK');
var St = document.getElementsByTagName('STYLE');
} else {
// browser minori - restituisce array vuoto
return [];
}
//per tutti i tag link ...
for( var x = 0, os = []; Lt[x]; x++ ) {
//controlla l'attributo rel per vedere se contiene 'style'
if( Lt[x].rel ) {
var rel = Lt[x].rel;
} else if( Lt[x].getAttribute ) {
var rel = Lt[x].getAttribute('rel');
} else {
var rel = '';
}
if(typeof(rel)=='string'&&rel.toLowerCase().indexOf('style')+1){
//riempe la variabile os con i stylesheets linkati
os[os.length] = Lt[x];
}
}
//include anche tutti i tags style e restituisce l'array
for( var x = 0; St[x]; x++ ) {
os[os.length] = St[x];
}
return os;
}
// ---------------------------------------------------------------------------------
// Infine la funzione per gestire le select del documento
function temaChange(selObj){
if(selObj.selectedIndex == 0){
templateChange();
}else{
eval("templateChange('"+selObj.options[selObj.selectedIndex].value+"')");
}
}
- Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HEAD>
<TITLE>Cambia Stile</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK type="text/css" rel="stylesheet" href="css/globale.css">
<LINK type="text/css" rel="stylesheet" href="css/default.css">
<LINK type="text/css" rel="alternate stylesheet" href="css/bianco.css" title="Bianco">
<LINK type="text/css" rel="alternate stylesheet" href="css/rosso.css" title="Rosso">
<LINK type="text/css" rel="alternate stylesheet" href="css/rosso.css" title="Rosso">
<LINK type="text/css" rel="alternate stylesheet" href="css/big.css" title="Grande">
<SCRIPT type="text/javascript" src="dyntema.js">
</SCRIPT>
</HEAD>
<BODY>
<H1>Cambia stile</H1>
<P>Per cambiare stile scegliere una voce dall'elenco:</P>
<FORM action=""> <DIV>
<SELECT id="tema" onChange="temaChange(this)">
<OPTGROUP label="Tema grafico:">
<OPTION value="" selected="selected">Stile predefinito</OPTION>
<OPTION value="Bianco">Bianco</OPTION>
<OPTION value="Rosso">Rosso</OPTION>
<OPTION value="Grande">Carattere grande</OPTION>
<OPTION value="Piccolo">Carattere piccolo</OPTION>
</OPTGROUP>
</SELECT>
</DIV>
</FORM>
</BODY>
</HTML>
Come mai ??
Mi date anche una mano se fosse a renderlo compatibile con FireFox ???
Grazie anticipatamente