Javascript per modificare proprietà CSS

[Low]

Salve a tutti.

Ho un problema e vorrei capire se è risolvibile in qualche modo.

All'interno di una pagina ho una tabella. Ad alcune delle righe (<TR>) di questa tabella è stata assegnata la classe "pippo" (CLASS="pippo").

La classe pippo viene definita nei CSS nella solita maniera:

.pippo { ...proprietà varie... }

Ebbene, io vorrei cambiare una proprietà della classe "pippo" attraverso javascript, in modo che tutte le righe della tabella che fanno riferimento alla classe "pippo" vengano modificate di conseguenza.

Ebbene, non ci sono riuscito e comincio a pensare che il problema sia di fondo.

Faccio notare che riesco a cambiare le proprietà se invece di una classe si tratta di un "ID selector" (#pippo { proprietà }), ma non è ciò che serve a me, in quanto un ID posso usarlo solo per un elemento e non per elementi multipli (dei <TR>, in questo caso).

Domanda: sto sbagliando qualcosa o non si può proprio fare?
Se si può fare, qualcuno potrebbe dirmi come, per favore?

Pensavo di creare ID multipli e di fare un ciclo, ma cercavo una soluzione più elegante e sintetica.

[pela]

prova con questa funzione:

function modificaclasse() {
var s=document.styleSheets[0].rules?document.styleSheets[0].rules:document.styleSheets[0].cssRules;
for(i=0;i<s.length;i++) {
  if(s[i].selectorText==".pippo") { //modifiche alla classe pippo
    s[i].style.color="#0000ff";
    s[i].style.textDecoration="underline";
    s[i].style.backgroundColor="#ffff00";
    break;
  }
}
}

[Low]

Grazie, proverò.

[Low]

Ho provato e purtroppo non funziona, le proprietà della classe non vengono modificate.

Nessuno ha idea di come fare? Se uso ID multipli ed un ciclo funziona, ma cercavo una soluzione che funzionasse con una classe, non con gli ID.

[pela]

io ho fatto una piccola prova e funzionava... strano :master:

[Xinod]

con quale browser stai provando?
anche a me funziona

[pela]

a me funziona sia su IE6 che su Mozilla

[Xinod]

idem,
se non vuoi modificare la classe ma far appartenere quegli elementi ad altra classe puoi fare anche così

<style type="text/css"> 
.spento {
	background-color:#ff0000;
}
.acceso {
	background-color:#00ff00;
}
</style> 
<script language="javascript" type="text/javascript">
function accendi() {
	if(document.getElementsByTagName) { 
		for(i=0; i < document.getElementsByTagName("TR").length; i++) 
			if(document.getElementsByTagName("TR")[i].className == "spento") 
				document.getElementsByTagName("TR")[i].className = "acceso"; 
	}
}
</script>
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="spento">
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>i</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
<tr>
<td colspan="4">accendi</td>
</table>

[Low]

Non funzionava per un mio errore. Corretto l'errore ha funzionato su Explorer ma non su Opera.

Invece la soluzione di Xinod, che ringrazio molto , funziona su tutti i browser.

Visto che ci sono, a vostro parere esiste un modo per evitare il ciclo?

Grazie ancora a tutti e due.

[uboz]

Leggi qua:
http://pro.html.it/articoli/id_263/idcat_8/pro.html
Puoi provare cambiando il css attraverso un link, è spiegato bene nella pagina...