Inhalt einer CSS-Klasse dynamisch ändern

[heinerle]

hallo helfer,
ich bin relativ fit in html, css und auch php.nun habe ich angefangen, mir wissen in javascript einzuimpfen und dieses wissen auch gleich anzuwenden. dabei bin ich auf ein problem gestossen, welches ich weder mit selfhtml, noch mit google, noch mit meinen schlauen büchern selöbst lösen konnte.
Problem:
vorhandene CSS-Einträge
a.nav:link {text-decoration: none; font-weight: bolder; color: #FF0000; font-family: fantasy; font-size: 13pt; font-style: normal }
a.nav:visited{ text-decoration: none; font-weight: bolder; color: #FF0000; font-family: fantasy; font-size: 13pt; font-style: normal; }
a.nav.hover { background-color: #0000FF; font-style: italic; border: 2px solid #00FF00; color: #FFFF00; text-decoration: none; font-family: fantasy; font-weight: normal; }
das sind nur 3 Beispiele, andere Einträge sind ähnlich.
die betroffenen Links werden über eine Schleife innerhalb eines PHP-Scriptes erzeugt
<a href="Adresse" class="nav" name="a_nav">Link</a>
Eine eindeutige Id kann ich den Links nicht geben, dass lässt das Script nicht zu(Seite wird mittels TinyButStrong generiert).

Per JavaScript sollen nun einzelne Werte dieser Klassen LIVE veränderbar sein (Hintergrund ist eine Live-Vorschau für den späteren Eintrag der geänderten Werte in eine DB). Der Benutzer klickt z.B. eine Farbe an um die Eigenschaft 'color: #FF0000' aus a.nav:link zu verändern.
Meine Frage: Wie erhalte ich Zugriff auf die einzelnen Elemente der Klasse? Wie erreiche ich eine Unterscheidung zwischen :hover oder z.B. :link?
andere Elemente verändere ich z.B. so:
document.getElementById(setupValue).style.backgroundColor = wert;
oder als Ergebnis eines Schleifendurchlaufes:
link[i].style.fontFamily = document.getElementById(feld).options[j].value;
Das funktioniert auch perfekt, ich erhalte mittels onclick() und onchange() jede beliebige Vorschau die ich will. Ich scheitere jedoch bei der Manipulation von a.nav und seinen Unterelementen (hover, visited,link und active).
Ich habe nur Schwierigkeiten, diese komplexen Klasse "nav" zu bearbeiten, da ich nicht weiss, wie ich z.B. font-family innerhalb von a.nav.hover ansprechen und ändern kann.
Bitte, bitte helft mir und das schnell, mir raucht hier der Kopf und ich komm einfach allein nicht weiter.

vielen Dank schon mal
heinerle

[basti_p]

sieh mal hier:

http://forum.de.selfhtml.org/archiv/2003/1/t35978/

grüße basti

[heinerle]

sieh mal hier:

http://forum.de.selfhtml.org/archiv/2003/1/t35978/

grüße basti

naja, ich hab mir da mal etwas zusamengebastelt aus diesem link. ich weiss ja, wie die CSS-Klasse aussieht:
a.nav:link { text-decoration: none; font-weight: bolder; color: #FF0000; font-family: fantasy; font-size: 13pt; font-style: normal}
und dann bringt mir
alert(document.styleSheets.item(1).cssRules.item(3));
als Ergebnis "font-family"
aber: wie müsste der Tag komplett lauten, damit ich den Wert(fantasy) von "font-family" erhalte? dafür bin ich scheinbar noch zu sehr Anfänger bzw. fehlt mir noch das Verständnis dafür

[Siechfred]

Hell-O!

Meine Frage: Wie erhalte ich Zugriff auf die einzelnen Elemente der Klasse? Wie erreiche ich eine Unterscheidung zwischen :hover oder z.B. :link?

Vielleicht hilft dir dieses Posting weiter:
http://forum.de.selfhtml.org/archiv/2002/12/t32968/

Siechfred

[heinerle]

Hell-O!

Meine Frage: Wie erhalte ich Zugriff auf die einzelnen Elemente der Klasse? Wie erreiche ich eine Unterscheidung zwischen :hover oder z.B. :link?

Vielleicht hilft dir dieses Posting weiter:
http://forum.de.selfhtml.org/archiv/2002/12/t32968/

Siechfred

DANKE  ;-)
das klingt schon mal sehr gut, aber kurze frage dazu: welches ist dann in meinem Fall die Bezeichnung der Pseudoklasse?
Ist es .nav oder ist es .nav:hover? der Name der Klasse ist ja "nav", alle Eigenschaften, die für die komplette Klasse gelten kann ich also über className dafür manipulieren. das würde aber bedeuten, dass der Name der Pseudoklasse .nav:hover oder .nav:link oder .nav:visited u.s.w. lauten müsste.  Liege ich da richtig?

[wahsaga]

hi,

das klingt schon mal sehr gut, aber kurze frage dazu: welches ist dann in meinem Fall die Bezeichnung der Pseudoklasse?
Ist es .nav oder ist es .nav:hover? der Name der Klasse ist ja "nav", alle Eigenschaften, die für die komplette Klasse gelten kann ich also über className dafür manipulieren. das würde aber bedeuten, dass der Name der Pseudoklasse .nav:hover oder .nav:link oder .nav:visited u.s.w. lauten müsste.  Liege ich da richtig?

Wie Thomas Meinike im verlinkten Archivthread schrieb, steht dir der im Stylesheets verwendete Selektor in der Eigenschaft .selectorText zur Verfügung.
Wenn du also den Index der Regel(n) im Stylesheet nicht kennst, dann musst du wohl die Collection
document.styleSheets.item(i).rules.item(j)
bzw.
document.styleSheets.item(i).cssRules.item(j)
erst mal durchlaufen, um die "richtige(n)" herauszufinden.

gruß,
wahsaga

[Cybaer]

Hi,

Per JavaScript sollen nun einzelne Werte dieser Klassen LIVE veränderbar sein

Coding: CSS-Regeln auslesen & ändern

Gruß, Cybaer