JavaScript mit CSS verbinden

[Jan]

Hallo.

Ich benutze folgende Funktion, um eine Tabellenzeile per Mouseover hervorzuheben, sobald sich der Benutzer mit der Maus über dieser Zeile befindet:

function trmarker_on(tr)
{
 tr.style.backgroundColor="#E1E1E1";
}

Jetzt steht da natürlich eine Farbangabe drin, die normalerweise aus einer CSS-Datei kommen sollte. Kann man JavaScript und CSS irgendwie verbinden?

Gruss,
Jan

[Klaus B.]

tr.style.backgroundColor="#E1E1E1";

Jetzt steht da natürlich eine Farbangabe drin, die normalerweise aus einer CSS-Datei kommen sollte. Kann man JavaScript und CSS irgendwie verbinden?

Wie wär's denn mit:

#tr:hover {background-color:#E1E1E1;}

im Mozilla funktioniert es, im MSIE bin ich mir jetzt nicht ganz sicher, ich vermute eher nicht.

MfG
Klaus

[Struppi]

Ich benutze folgende Funktion, um eine Tabellenzeile per Mouseover hervorzuheben, sobald sich der Benutzer mit der Maus über dieser Zeile befindet:

function trmarker_on(tr)
{
 tr.style.backgroundColor="#E1E1E1";
}

Jetzt steht da natürlich eine Farbangabe drin, die normalerweise aus einer CSS-Datei kommen sollte. Kann man JavaScript und CSS irgendwie verbinden?

ist nicht ganz trivial. ich hab hier einen Ansatz: http://home.arcor.de/struebig/js/lib/css.js?0
und hier ein Beispiel http://home.arcor.de/struebig/js/lib/css_test.html
meine Erläuterungen lassen aber noch zu wünschen übrig ;-)

Struppi.

[Thomas Luethi]

Hallo Jan,

function trmarker_on(tr)
{ tr.style.backgroundColor="#E1E1E1"; }
Jetzt steht da natürlich eine Farbangabe drin, die normalerweise aus einer CSS-Datei kommen sollte. Kann man JavaScript und CSS irgendwie verbinden?

Natuerlich.

Statt einer Farbe kannst Du auch eine Klasse zuweisen:

tr.className="bla"

Die Funktion kannst Du Dir eigentlich sparen - notiere direkt im TR-Element:
<tr onmouseover="this.className='spezial'" onmouseout="this.className='normal'">

CSS:
tr, tr.normal { /* normale Farben */ }
tr.spezial { /* spezielle Farben */}

Zugegeben, das ist in SelfHTML irgendwo gut versteckt:
http://selfhtml.teamone.de/javascript/objekte/all.htm#class_name

HTH, mfg
Thomas