Dynamische Klassenzuweisung und Darstellung (per CSS)

[Daniela A.]

Hallo zusammen,

ich habe da wohl ein Verständnisproblem beim Thema dynamische Zuweisung einer Klasse per Javascript - respektive dessen (Nicht-) Auswirkung.

Ich habe per Javascript die Klassen von HTML-Blockelementen (DIV u.a.) geändert (Klasse txt und txt_active) - dies funkioniert auch soweit, zumindest sagen mir das Tools, wie Firebug etc. Aber die per CSS diesen Klassen zugewiesenen Eigenschaften werden nicht angezeigt!

Auschnitt css:

  
.txt {  
	display:none;  
	border:1px solid gray;  
}  
  
.txt_active {  
	display:block;  
	border:1px solid black;  
}  

Per Javascript ändere ich die Klasse des Elementes in Abhängigkeit zur bestehenden - also immer abwechselnd nach jedem Klick:

  
function handleClick(obj)  
{  
	if(obj.className=='txt') {  
		obj.className= 'txt_active';  
	} else  {  
		obj.className= 'txt';  
	}  
}  

Wenn ich per Javascript direkt die Eigenschaft style.display auf 'block' oder 'none' ändere, werden die Elemente wunschgemäß ein- und ausgeblendet - aber genau das wollte ich nicht, da ich die Darstellungsspezika ausschließlich in CSS stellen wollte.
Alle übrigen CSS-Eigenschaften, welche ich für die Klassen definiert habe (im abgespeckten Beispiel oben nur border) werden ignoriert.

Ich habe dann versucht, die Elemente zunächst sichtbar (also <div class="txt_active">) darzustellen und dann per Javascript auszublenden: nun wird der Rahmen auch angezeigt - bis zum ersten onClick-Event, danach zeigen die Elemente keinen Rahmen mehr, egal ob die Klasse txt oder txt_active zugewiesen wird - die display-Eigenschaft wird aber nun geändert!

Ich hoffe, dass ich mich einigermaßen verständlich machen konnte und jemand hier einen Tipp für mich hat.
Sicher habe ich irgendwo einen Denkfehler, aber ich komme nicht drauf!

D. Anke!

P.S: getestet auf WIN XP SP3 mit Opera 10.10, MSIE 8.0, Safari 4.04 und Fx 3.62

[ChrisB]

Hi,

Alle übrigen CSS-Eigenschaften, welche ich für die Klassen definiert habe (im abgespeckten Beispiel oben nur border) werden ignoriert.

Hast du zunächst sichergestellt, dass sie nicht von anderen Regeln mit höherer Spezifität überschrieben werden?

Ich hoffe, dass ich mich einigermaßen verständlich machen konnte und jemand hier einen Tipp für mich hat.

Problem für mich so nicht nachvollziehbar - hast du bitte eine Online-Beispiel (auf's wesentliche reduziert & valide)?

MfG ChrisB

[Daniela A.]

Hallo Chris,

Alle übrigen CSS-Eigenschaften, welche ich für die Klassen definiert habe (im abgespeckten Beispiel oben nur border) werden ignoriert.

Hast du zunächst sichergestellt, dass sie nicht von anderen Regeln mit höherer Spezifität überschrieben werden?

Wohl nicht ganz, leider!

Ich hoffe, dass ich mich einigermaßen verständlich machen konnte und jemand hier einen Tipp für mich hat.

Problem für mich so nicht nachvollziehbar - hast du bitte eine Online-Beispiel (auf's wesentliche reduziert & valide)?

Als ich soeben versucht habe, mein Beispiel entsprechend zu kürzen kam ich zu einer funktionierenden Variante. Ich werde zukünftig versuchen, solch einen Fehlalarm zu vermeiden - auf jeden Fall danke ich Dir sehr!

D. Anke!