✔ Per JS einem li eine CSS Klasse vergeben

[hanzen]

Hallo,

ich habe grade folgendes Problem.
Ich würde gerne dem a href im ersten li der ul#navi_images eine Klasse verpassen.
Mit dem a schien es nicht zu klappen, daher habe ich nun erstmal versucht nur der li die Klasse zu geben und zwar so:

var first_img = window.document.getElementById('navi_images').firstchild;
first_img.className = "active";

Irgendwie scheint er mit der ersten Zuweisung der Variable auch kein Problem zu haben, aber dann mit der zweiten Zeile. Da bekomme ich immer ein:
"first_img has no properties"

Aber müßte es nicht vom Prinzip her so funktionieren?
Irgendwie verstehe ich es nicht.
Wäre nett wen mir jemand auf die sprünge helfen könnte.

Danke, Hannes

 

[Gumbo]

Du musst auf die korrekte „camel case“-Schreibweise achten:

var first_img = window.document.getElementById('navi_images').firstChild;

 

[hanzen]

Arg!
Ja, stimmt, danke, jetzt meckert er nicht mehr.

Aber irgendwie scheint es nicht zu klappen mit firstChild das erste li anzusprechen.
Das funktioniert (ul#bla):

mein = window.document.getElementById('bla');
mein.className = 'active';

Aber sobald ich quasi die erste li in der ul#bla anspreche passiert nichts mehr, auch wenn es eine CSS Klasse

ul#bla li.active {color: red;}

gibt.

Also hierbei passiert nichts, aber es gibt auch keinen Fehler:

mein = window.document.getElementById('bla').firstChild;
mein.className = 'active';

Eigentlich will ich ja auch das a im li ansprechen, aber wenn ich es so mache...

mein = window.document.getElementById('bla').firstChild;
mein.a.className = 'active';

...hat er wieder keine Properties, obwohl es ein a in dem li gibt.

Hiermit hab ich rumprobiert:

<ul id="bla">
	<li><a href="#">eins</a></li>
	<li><a href="#">zwei</a></li>
	<li><a href="#">drei</a></li>
	<li><a href="#">vier</a></li>
</ul>

Vielleicht ist es auch die falsche Herangehensweise?
Hast Du noch ein Tipp?

 

[Biergamasda]

hast schon mal

mein.firstChild.className = 'active';

probiert?

 

[hanzen]

Gute Idee, aber leider regt sich da auch nichts. Kein Fehler, aber auch kein Ergebnis.
Mit

mein.firstChild.a.className = 'active';

dann wieder keine Properties.

Irgendwie will das nicht.

 

[Gumbo]

Das erste Kindelement ist in diesem Fall nur ein Textelement, nämlich der Text zwischen dem Start-Tag des ul-Elements und dem Start-Tag des ersten li-Elements.

 

[hanzen]

Das erste Kindelement ist in diesem Fall nur ein Textelement...

Wie recht Du hast. Herje, ich hasse javascript, aber wenn man auch mal den DOM Inspector benutzt, dann ist es auch gleich alles ein bisschen einfacher

Damit klappt es:

mein = window.document.getElementById('bla').childNodes[1].firstChild;
mein.className = 'active';

Allerdings frage ich mich, warum das nicht klappt:

mein = window.document.getElementById('bla').childNodes[1].a;
mein.className = 'active';

Ist das nicht beides das selbe? Auch mit einem großen "A" geht es nicht. Ich hab zwar jetzt, was ich will, aber interssieren würde es mich trotzdem.

Danke für den Denkanstoß, Hannes


p.s.
Nun ist mir grade aufgefallen das der IE es nur richtig macht, wenn ich childNodes[0] nehme. Der zählt da anders. Der hat kein Textelement dazwischen. Hast du das evtl. auch einen Anstoß?

 

[hanzen]

Habe es jetzt so gemacht, aber irgendwie ist das ganz schön häßlich, oder?

	navRoot = document.getElementById('bla');
	for (i=0; i<=1; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
			node.firstChild.className="active";
			break;
		}
	}

Aber javascript ist ja immer irgendwie häßlich. Oder liegt es gar an mir? Ne, oder?

 

[hela]

...Aber javascript ist ja immer irgendwie häßlich...

Ja, man kann es aber auch noch häßlicher machen
Mach es doch einfach so:

navRoot = window.document.getElementById('bla');
navRoot.getElementsByTagName("li")[0].getElementsByTagName("a")[0].className = "active";

Damit müsste es auch gehen.

 

[hanzen]

Ja, man kann es aber auch noch häßlicher machen

Danke!

Mach es doch einfach so:

navRoot = window.document.getElementById('bla');
navRoot.getElementsByTagName("li")[0].getElementsByTagName("a")[0].className = "active";

Damit müsste es auch gehen.

Das geht. Klasse. Diese Verkettungen hatte ich noch nicht so auf dem Schirm. Danke, das wird mir in Zukunft sicher noch öfters nützlich sein.

Top Thread, ich danke, Hannes