Gruppe von div's ansprechen (schüchtern bin ich nicht ;-)

[Gürgen]

Ich habe ein Problem.
Und außerdem habe ich keine Ahnung wie ich folgendes hinbekomme:

Ich möchte einigen (dutzend) <div>-Elementen den style ändern. Dieser ist per css-class festgelegt. Da "getElementsByClassName" wohl erst in HTML5 kommen wird und <div>-Elemente keinen "name=xx" haben (getElementsByName) habe ich keine Ahnung wie ich diese <div>'s ansprechen kann. Muss ich jedem eine id geben und dann die id's alle einzeln ansprechen?

Gürgen

[MudGuard]

Hi,

Da "getElementsByClassName" wohl erst in HTML5 kommen wird

einige Browser können das wohl schon, bei den anderen kann man es nachrüsten, es gibt genügend Javascript-Implementierungen davon.
Google nach getElementsByClassName und Du wirst fündig werden.

cu,
Andreas

[Gürgen]

Moin,

einige Browser können das wohl schon, bei den anderen kann man es nachrüsten, ...

Ich kann aber leider nicht auf die Browser meiner Kunden zugreifen.

[Micha]

Hallo Gürgen,

Moin,

einige Browser können das wohl schon, bei den anderen kann man es nachrüsten, ...

Ich kann aber leider nicht auf die Browser meiner Kunden zugreifen.

So meinte er das mit dem Nachrüsten auch nicht. Du sollst lediglich eine Suchmaschine Deiner Wahl benutzen und nach einer Implementierung als JavaScript suchen.

Mit freundlichem Gruß
Micha

[Gürgen]

Danke!

_

[CSSler]

Es gibt aber getElementsByTagName, und dann kannst du in einer Schleife auf die class überprüfen.

[Gürgen]

Es gibt aber getElementsByTagName, und dann kannst du in einer Schleife auf die class überprüfen.

Alles klar. So wird's gemacht!

for (var i = 0; i < document.getElementsByTagName('div').length; i++) {  
if(document.getElementsByTagName("div")[i].className == 'container1') document.getElementsByTagName("div")[i].style.display = "none";  
}

Danke!

[Struppi]

Alles klar. So wird's gemacht!

for (var i = 0; i < document.getElementsByTagName('div').length; i++) {

if(document.getElementsByTagName("div")[i].className == 'container1') document.getElementsByTagName("div")[i].style.display = "none";
}

  
Noch einfacher und vor allem schneller würde es so gehen  
  
`var alle = document.getElementById('container').getElementsByTagName("div");`{:.language-javascript}  
  
vorrausgesetzt innerhalb des container sind keine anderen DIV Elemente.  
  
Struppi.

[Grürg ... blah]

vorrausgesetzt innerhalb des container sind keine anderen DIV Elemente.

Doch, schon. Trotzdem Danke.

[Gunnar Bittersmann]

@@Struppi:

nuqneH

Alles klar. So wird's gemacht!

for (var i = 0; i < document.getElementsByTagName('div').length; i++) {

if(document.getElementsByTagName("div")[i].className == 'container1') document.getElementsByTagName("div")[i].style.display = "none";
}

  
Nichts klar. So nicht!  
  
  

> Noch einfacher und vor allem schneller würde es so gehen  
> `var alle = document.getElementById('container').getElementsByTagName("div");`{:.language-javascript}  
  
Noch einfacher und vor allem schneller würde es [so](https://forum.selfhtml.org/?t=189353&m=1261532) gehen.  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[nemoinho]

for (var i = 0; i < document.getElementsByTagName('div').length; i++) {

if(document.getElementsByTagName("div")[i].className == 'container1') document.getElementsByTagName("div")[i].style.display = "none";
}

  
da kann man ja aber auch noch kräftig an der Geschwindigkeit und dem code-volumen arbeiten:  
~~~javascript
  
for(var c = document.getElementsByTagName('div'), i = c.length; i--; ){  
  if(c[i].className == 'container1') c[i].style.display = 'none';  
}

abgesehen davon, dass es via css-klasse im body oder auf html-tag und entsprechender css-deklaration wesentlich leichter und vor allem nochmal viel schneller geht.

mfG Felix Nehrke

P.S.: Besuche unseren Blog:  http://www.pommes-blog.de

[Gunnar Bittersmann]

@@Gürgen:

nuqneH

Ich möchte einigen (dutzend) <div>-Elementen den style ändern. Dieser ist per css-class festgelegt.

Du meinst, dass alle zu ändernden 'div'-Elemente derselben Klasse "foo" angehören?

Dann änderst du einfach die Klasse EINES Vorfahrenelements ('body' bietet sich an):

document.body.className += " compact";

Im Stylesheet steht:

.compact .foo { display: none }

und schon sind sie alle weg.

Und Verhalten (JavaScript) und Präsentation (CSS) sind fein säuberlich voneinander getrennt.

Qapla'

[Gürgen]

Also so läuft das auch. Ist vielleicht auch schneller und besser hinsichtlich der Trennung von style und function.

Allerdings verstehe ich nicht so richtig was da passiert. Wird jetzt jedem Element des body eine zusätzliche class gegeben?

[Struppi]

Also so läuft das auch. Ist vielleicht auch schneller und besser hinsichtlich der Trennung von style und function.

Allerdings verstehe ich nicht so richtig was da passiert. Wird jetzt jedem Element des body eine zusätzliche class gegeben?

Nein, nur dem body, aber durch die Spezifikation im CSS spricht dieses nur die gewünschten Elemente an.

Struppi.

[Der Martin]

Hallo,

Allerdings verstehe ich nicht so richtig was da passiert. Wird jetzt jedem Element des body eine zusätzliche class gegeben?

nein, nur dem body. Entdecke die Möglichkeiten!
In diesem Fall die Möglichkeiten des Nachfahren-Selektors, mit dem Elemente paradoxerweise anhand ihrer Vorfahren selektiert werden können:

a img {  }
    Selektiert alle img-Elemente, die innerhalb eines a-Elements vorkommen
 #navi li
    Selektiert alle li-Elemente innerhalb eines Elements mit der ID "navi"
 .compact .foo
    Selektiert ... na, du weißt schon ;-)

So long,
 Martin