Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

Javascript cambio CSS compatibile anche con FireFox

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

Javascript cambio CSS compatibile anche con FireFox

Postdi Paolo87 » 03/08/11 15:37

Ciao ragazzi, ho trovato questo file .js ma non riesco a farlo funzionare anche su FireFox:
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+"')");
   }
}
Mentre la pagina HTML è:
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>
questa banalissima pagina HTML altro non fa che cambiare il colore di sfondo in base al css scelto dal suo menù a tendina. Però si IE gira ma su FireFox no...
Come mai ??
Mi date anche una mano se fosse a renderlo compatibile con FireFox ???

Grazie anticipatamente
Paolo87
Utente Senior
 
Post: 305
Iscritto il: 26/08/07 09:54
Località: Roma

Sponsor
 

Postdi archimede » 03/08/11 17:38

L'esempio è incompleto, per cui impossibile da verificare.

In ogni caso per questo genere di cose (e molte altre, peraltro) sconsiglio vivamente di scrivere del codice custom: usa jQuery (esempio) o altre librerie analoghe.

HTH.

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova


Torna a Programmazione


Topic correlati a "Javascript cambio CSS compatibile anche con FireFox":

Problema con firefox
Autore: Girod
Forum: Software Windows
Risposte: 1

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti