Newsgroup: it.comp.lang.javascript
Titolo: Cambio CSS al volo

Ciao a tuttiiii
Ho un problema e non riesco a venirne a capo!
Praticamente ho una pagina html che contiene una select (combobox) la quale 
contiene i nomi di vari
fogli di stile...ora ho associato all'evento onchange della select una 
funzione che dovrebbe
cambiarmi il foglio di stile!
La funzione è questa:
function cambiaCSS(foglio) {
 // se non esiste il tag con id == stile (ovvero il tag link a cui associo 
il foglio di
stile) lo creo come figlio di head
 if ((elemento = document.getElementById("stile")) == null) {
  nuovoNodo = document.createElement("link");
  nuovoNodo.id = "stile";
  nuovoNodo.rel = "stylesheet";
  nuovoNodo.type = "text/css";
  nuovoNodo.href = "";
  elem = document.getElementsByTagName("head")[0];
  elem.appendChild(nuovoNodo);
 }
 elemento = document.getElementById("stile");
 elemento.href = foglio + ".css";
 prelevaColore();
}
Praticamente la mia pagina html inizialmente non contiene alcun tag link a 
cui è associato il CSS,
ma lo creo al caricamento della pagina (body => onload) richiamando la 
funzione cambiaCSS
passandogli l'elemento settato per default nella select. Naturalmente 
cambiaCSS è richiamata anche
ogni qual volta viene cambiato il valore della select.
Questa funzione alla fine richiama un'altra funzione:
function prelevaColore() {
 css = document.styleSheets[0];
 var i=0;
 var trovato=false;
 while ((i<css.cssRules.length) && (trovato==false)) {
  if (css.cssRules[i].selectorText == ".voci")
   trovato=true;
  i++;
 }
 if (trovato) {
  i--;
  sfondo = css.cssRules[i].style.backgroundColor;
  contorno = css.cssRules[i].style.color;
 }
 else {
  sfondo = "#FFCCFF";
  contorno = "#00CCFF";
 }
}
la quale ha il semplice compito di analizzare il foglio di stile appena 
caricato e prelevare i
colori associati a backgroundColor e a color.
Bhe qui viene il bello, praticamente javascript mi riconosce che c'è un 
foglio di stile associato
alla pagina (infatti se richiamo la funzione contaStili() questa mi 
restituisce 1)
function contaStili() {
 document.write("Questa pagina possiede " + document.styleSheets.length + " 
stili");
}
quindi mi passa l'istruzione "css = document.styleSheets[0];", ma mi da 
errore quando tenta di
eseguire "while ((i<css.cssRules.length) && (trovato==false)) {" ovvero Web 
Developer dice:
Errore: uncaught exception: [Exception... "A parameter or an operation is 
not supported by the
underlying object"  code: "15" nsresult: "0x8053000f 
(NS_ERROR_DOM_INVALID_ACCESS_ERR)"  location:
"
http://localhost/javascript/miomenuesterno.php
 Line: 55"]
come se non riuscisse ad accedere o vedere le regole associate al foglio di 
stile.
Il bello è che quando agisco sulla select, cambiando stile, mi viene 
richiamata la funzione
cambiaCSS() e la pagina cambia realmente stile perchè cambia aspetto!
Non riesco proprio a capire il perchè la funzione prelevaColore() fallisca!?
Dho è venuta un pò lunghetta la cosa, ho cercato di esprimermi meglio che 
potevo, ma non so quanto
ci avete capito, a vederlo sembra un cavoltata, magari dopo lo tiro su e ve 
lo mostro in
funzione...
Grazie 

 ve lo mostro in
Ok raga potete vederlo qui:
www.carmnu.altervista.org/miomenuesterno.php
quello che deve accadere è che anche le voci programmi e comunity quando si 
passa col mouse sopra devono prendere il colore del bordo, e la scritta il 
colore di sfondo. Questo non succede perche la funzione preleva colore, che 
serve appunto a prendere i colori di bordo e sfondo, si blocca per non so 
quale motivo, anche perchè come avrete notato il foglio di stile viene 
correttamene cambiato ogni qual volta si cambia la voce della select!
Confido in voi!
Ciao 

ho risolto la cosa in altro modo:
attraverso uno script php creo tante voci link nel head quanti sono i file 
*.css presenti nella cartella "./", in modo da avere na cosa simile
<head>
    <link rel="stylesheet" type="text/css" href="stile1.css" title="stile1">
    <link rel="stylesheet" type="text/css" href="stile2.css" title="stile2">
    ...
quindi onload del body li disabilito tutti lasciando abilitato soltanto 
quello che ha la proprietà selected settata nella select.
Quindi onchange della select disabilito tutti i fogli di stile ma abilito 
quello appena selezionato.
Ora sembra funzionare bene
http://www.carmnu.altervista.org/cambiaStile.php
comunque sarei grato se qualche anima pia mi dicesse il perchè la soluzione 
precedente non funziona.
Utilizzando quest'altra soluzione ho notato una cosa:
se setto la proprietà di un elemento, ad esempio:
elem.style.color = blue;
e poi in un secondo momento cambio foglio di stile l'eventuale proprietà 
color è come se non venisse vista da elem, perchè non ha effetto sullo 
stesso elem.
Per far si che lo stile agisca su elem c'è bisogno di resettare la proprietà 
color al suo valore di default:
elem.style.color = "";
perchè accade questo?
Ci sono altre possibilità di resettare al valore di default? Ad esempio ho 
trovato un messaggio in cui era consigliato di utilizzare:
elem.style.property = "value";
per resettare tutti i valori, ma a me non funziona...
CIAO