modifica tramite JS degli attributi :hover di un link

[Marcolino's]

Ciao.
Ho bisogno di modificare dinamicamente il DOM di una pagina, in particolare le pseudoclassi di un link e non so come fare.
Conosco bene la procedura documento.elemento.style.proprietà = valore, ma se si parla di una pseudoclasse tipo :hover per un link?
Qualcuno sa come si può intervenire in questo caso?

Grazie.

[cavicchiandrea]

documento.getElementById('tuo-id-univoco-oggetto').style.hover = 'codice-colore';
cosi hai provato?

[Marcolino's]

Be allora: premesso che la modifica di stile si applica all'elemento e quindi semmai una modifica alla classe (se possibile non ne sono sicuro) non avrebbe senso, comunque non ha effetto, ne firebug mi da errore.

[Marcolino's]

Ho trovata una risposta su Stackoverflow
http://stackoverflow.com/questions/3...rom-javascript ora la provo

[Marcolino's]

Sembrava facile!
Se ho ben compreso ciò che si vuole fare su stack over flow, allora non mi serve.
Però, grazie a firebug sono riuscito a comprendere cosa cercare.
Premesso che la parte in esame non è su foglio di stile esterno ma integrato nell'html della pagina, ho cercato tramite getElementsByTagName l'elemento <style> nella pagina.

styles = document.getElementByTagName('style')[0]

attenzione perché gli elementi sono comunque array e visto che il mio era il primo dei due (l'altro è un settagio particolare per IE ) quindi è lo zero.
Ebbene funziona, lo trova, ma <style> non è un elemento come gli altri, no è un array ed ogni elemento dell'array corrisponde ad una definizione di stile. Si può anche ciclare alla ricerca di una particolare, nel mio caso ad esempio:

for (var i = 0; i < styles.length; i++) {
   if (styles.sheet.cssRules[i].indexOf('#demomenu a:hover')) {
      alert('Trovata!!! ' + i);
   }
}

Ora so che styles.sheet.cssRules[5] corrisponde a #demomenu a:hover {color: yellow;} ma come faccio a modificarla?
Non solo, ma sheet.cssRules sono si standard del W3C ma funzionano lo stesso su IE e Safari? (ancora non lo so!).

Ebbene sappiatelo ce l'ho fatta
Ecco come: quando trovo styles.sheet.cssRules[5]; è come se trovassi un qualsiasi elemento nella pagina, per capirci è come se scrivessi document.getElementsByTagName('a'); e poi vi applico lo stile che voglio con il solito metodo: ...stile.color = 'red';, quindi faccio così:

styles.style.color = '#aaa';

per avere l'hover in grigetto, e funziona!!!
E per IE? Non ne ho idea almeno per ora non lo so, l'ho provato su Chrome e funziona e non l'ho provato su Safari.

styles = document.getElementByTagName('style')[0];
for (var i = 0; i < styles.length; i++) {
      if (styles.sheet.cssRules[i].indexOf('#demomenu a:hover')) {
         styles.style.color = '#aaaaaa';
      }
}

[Marcolino's]

Scusate nella funzione di cui sopra c'è un errore di sbaglio
Eccola corretta.

function hovering (coloreHex) {
var styles = document.getElementsByTagName('style')[0].sheet.cssRules;
for (var i = 0; i < styles.length; i++) {
	if (styles[i].cssText.indexOf('#demomenu a:hover') != -1) {
		if (document.getElementById('checkHover').checked) {	//	Se checked!
			styles[i].style.color = '#' + coloreHex;
		}
	}
}
};    //    fine hovering()

Ovvio si può modificare per inserire qualsiasi altro valore o stile.