come ripassare il comando da js al css?

[neogi10]

Ciao a tutti,
sto creando un po' di funzioni javascript temporizzate per rendere animato un sito, e creandone una di qst mi sono imbattuto in un "conflitto" js-css, dove sfortunatam per me vince js...
mi spiego meglio: voglio sfumare lo sfondo di una barra di link all'evento onmouseout e per fare qst utilizzo il DOM col js, però eseguita una volta la funzione, qnd torno col mouse sullo stesso link della barra non funziona più ":hover" per qll elemento impostato nei css, perché il browser tiene a mente l'ultimo valore del js lasciato dal onmouseout precedente, e anche se qll valore è "transparent" non mi utilizza più i css per quel background.

ESEMPIO
Vado su un link della barra e grazie ad un :hover (css) il background di qll cambia e resta cambiato fino qnd non levo il mouse da qll.... a qst punto scatta l' onmouseout (js) che lancia la funzione temporizzata che fa sfumare lo sfondo fino ad arrivare a "transparent" (ovvero vedo il colore di sfondo iniziale, prima di :hover).
Fin qui tutto bene. Ma ripassando su qll stesso link ora l' :hover non funziona più, ovvere appena metto il mouse lo sfondo resta immutato, poi qnd lo tolgo ovviamente riparte la funzione e dinuovo tutto bene...il problema è che la permanenza del cursore sul link dalla seconda volta in poi non "colora" più lo sfondo.

Come si evince il problema è che il browser da precedenza ai js e non ai css (anche a bocce ferme)... come faccio invece a dire che dopo la dissolvenza voglio che "ricomandi il css"? non è che per caso esiste la possibilità di settare col js uno sfondo tipo "null" che quindi fa capire ai browser di cercare pure al trove gli ordini?
So benissimo che potrei usare un onmouseover per ogni link...ma non mi va di appesantire il codice (secondo me deve esistere un'altra strada)...qlc può darmi una mano?

GRAZIE

[Xinod]

se ti serve leggere fisicamente i valori specificati nel css non c'e' altro modo che usare l' oggetto stylesheets, ne troverai un' analisi ricca di esempi ricercando nella sezione javascript di html.it

se l' input non dovesse bastarti per procedere autonomamente,
secondo me se non lasci un esempio funzionante da visionare difficilmente troverai qualcuno in grado di aiutarti
ciao

[neogi10]

Ciao Xinod, grazie per la risposta , ma non so se hai capito la domanda, o forse sono io che non ho capito la risposta

Secondo me, il mio è un problema standard che sarà capitato a molti...
mi era venuta l'idea di utilizzare il className, ma provando ho appena visto che non funziona.
Quindi ora mi metto a cercare qnt suggerito da Xinod.

Cmq se qlc altro ha suggerimenti li accetto volentieri.

[Xinod]

Originariamente inviato da neogi10
Secondo me, il mio è un problema standard che sarà capitato a molti...

dalla descrizione sembrava ti servisse riprendere un valore dal css

ripeto che spiegando le cose cosi', solo a parole, si perde molto tempo...

[neogi10]

Ho appreso le potenzialità di styleSheet, ma purtroppo non fa al caso mio, in qnt effettivamente non fa altro che prendere un valore dal css.. e se infatti prendo qll della mia classe con :hover il background mi diventa di qll colore sempre (ora non posto il codice perché lo ho su un altro pc)..

Faccio un esempio molto semlificato
codice html:

<div id="tab" onmouseout="nomefun">
...
</div>

codice css:

tab {
   background: #333;
}
tab:hover {
   background: #000;
}

codice js:

function nomefun(){
   document.getElementById(tab).style.background="#F60"
   setTimeout(document.getElementById(tab).style.background="transparent",1000) ;
}

La prima volta che investo il div col mouse l' :hover del css funziona, appena lo tolgo parte la funzione e dopo 1sec torna il colore #333, il punto è che se rimetto il mouse sul div una seconda volta non diventa più #000 standoci sopra, ovvero l':hover del css non viene più ascoltato perché persiste il transparent del js, poi qnd tolgo il mouse ovviam parte la functio js, in quanto js successivo batte js precedente. Ora per fare qlc del tipo :hover posso risolvere con un onmouseover="this.style.background='#000'"..... ma secondo me ci deve essere un metodo per ripassare il comando al css dopo la function nomefun...questione di principio, peso della pag, chiarezza di codice e classe

p.s.: così lo script sembra creare una cosa brutta, ma in qll creato la function è temporizzata e prende i colori da un array creando una dissolvenza; l'array si conclude con un "transparent"

GRAZIE ancora Xinod per il tuo aiuto (e scusa se non avevo fatto un esempio di codice)

[Xinod]

ok, ora e' chiaro,
quando setti
document.getElementById(tab).style.background="#F6 0"
e' come se nel markup scrivessi
<div id="tab" style="background:#F60">

questa e' una dichiarazione in linea, sempre piu' "forte" di qualsiasi regola in css esterno, qualora ovviamente ridefinisca le medesime proprieta'
quindi la domanda che ti poni non e' corretta: non e' il browser che da precedenza al js rispetto al css, questo e' quello che ottieni se definisci il background in linea

la soluzione del className e' corretta, anche se scomoda

<style type="text/css">
#tab {
   background: #f00;
}
#tab:hover {
   background: #000;
}
#tab.green {
   background: #0f0;	
}
</style>
<script type="text/javascript">
function nomefun(){
   document.getElementById('tab').className="green"
   setTimeout("document.getElementById('tab').className=null",1000) ;
}
</script>

altrimenti, continua a lavorare sul background definito come stile in linea e rimuovilo quando ritieni opportuno

function nomefun(){
   document.getElementById('tab').style.background="#0f0"
   setTimeout("document.getElementById('tab').style.background=null",1000) ;
}

ciao


P.s. ho editato questa risposta, in caso l' avessi gia' letta

[neogi10]

GRAZIE 1000 Xinod!
Appena ho tempo provo..
allora avevo pensato bene qnd già nel primo messaggio di qst discussione avevo ipotizzato l'esistenza di un entità "null"....peccato non aver provato (avevo già fatto molti tentativi), non pensavo di essere un veggente

Il className non mi conviene usarlo per il semplice motivo che con lo style.backgrund mobilito solo un array di colori e non devo far 20 "elementi" di css...
L'avevo pensato solo per ribadire al browser di guardare il css...

Ciao
e ancora grazie

[neogi10]

Noooooo !
Ho appena provato e non funziona

document.getElementById(element).style.background=null;

ne su IE7 ne su Firefox 2 (per altro qnd metto qst null IE7 mi da un errore, ma non mi sa dire di più)... se al posto di null metto per es "red" tutto funziona e non c'é alcun errore (quindi escludo errori di battitura), ma non è l'effetto che voglio ovviamente...

cosa c'é dunque? forse il null non si può usare x annullare uno stile in-line?

[Xinod]

a me con ff2 non darebbe errori, con IE si', non avevo verificato

prova cosi'
setTimeout("document.getElementById('tab').removeA ttribute('style')",1000);

[neogi10]

Con qst ultima perla di sagezza sono sistemati sia IE7 che FF2...lo testerò anche su Opera e IE6 appena posso...

GRAZIE 1000 ancora una volta onnipresente Xinod