✔ [JavaScript] DIV über Klasse ansprechen

[ricounltd]

Hallo,
ich würde gern wissen, wie man DIV-Layer über deren Klasse ansprechen kann.

Folgendes Szenario:
Ich habe auf einigen Seiten DIV-Layer verteilt, die die Klasse "checkbox" besitzen. Jetzt möchte ich all diese Layer per Javascript ansprechen.

document.getElementsByClassName('checkbox')

Der Grund ist, dass ich per JS eine weitere Klasse zuweisen will, nämlich die Klasse "javascript". Zum Schluss sollen alle DIV's mit der Klasse "checkbox", die Klasse "checkbox javascript" besitzen. Ich hoffe ihr könnt mir folgen.
Warum ich das mache? Nun ja, die Layer sollen eben nur bei aktiviertem Javascript speziell formatiert werden.

Ich bedanke mich schonmal im voraus für eure Hilfe!

~edit:

Hab es so gelöst:

var checkbox = document.getElementsByClassName('checkbox');
for(i= 0; i < checkbox.length; i++) {
  checkbox[i].className = 'checkbox javascript';
}

 

[CPoly]

Mach es bitte nicht so, das ist unnötig. Füge die Klasse lediglich zum html oder body Element hinzu. Alles Weitere erledigt CSS.

/*vorher*/
.checkbox.javascript

/*nachher*/
.javascript .checkbox

Das ist weniger und einfacherer Code und auf alle Elemente anwendbar (du musst nicht den Code ändern wenn noch etwas außer .checkbox dazu kommt)

 

[ricounltd]

Hey, ich kann dir nicht ganz folgen. Ich füge doch die Klasse hinzu, oder?
Deine CSS-Anweisungen bringen mich nicht weiter.

Die erste Anweisung formatiert den DIV, welcher die Klasse "checkbox javascript" hat. Die zweite Anweisung hingegen formatiert nur das Element mit der Klasse "checkbox", welches innerhalb des DIV's mit der Klasse "javascript" liegt.

 

[CPoly]

Die erste Anweisung formatiert den DIV, welcher die Klasse "checkbox javascript" hat. Die zweite Anweisung hingegen formatiert nur das Element mit der Klasse "checkbox", welches innerhalb des DIV's mit der Klasse "javascript" liegt.

Und wo ist jetzt der Unterschied? Wenn JavaScript aktiv ist, ist doch beides funktional äquivalent. Angenommen du willst jetzt auch alle Elemente mit der Klasse ".foo" verändern. Dann musst du neuen JavaScript Code schreiben, der auch dort überall "JavaScript" anhängt. Mit der anderen Lösung musst du nichts ändern, sondern einfach im CSS ".javascript .foo" benutzen.

 

[hela]

... Die zweite Anweisung hingegen formatiert nur das Element mit der Klasse "checkbox", welches innerhalb des DIV's mit der Klasse "javascript" liegt.

Nein: Der zweite CSS-Selektor spricht alle Elemente mit der Klasse "checkbox" an, die sich innerhalb des BODY-Element mit dem Klassenattribut "javascript" befinden, wenn du per Javascript dem BODY-Element dieses Attribut zuweist.

Damit hast du doch erreicht, was du eigentlich wolltest.

Zu beachten ist, dass im zweiten CSS-Selektor ein Leerzeichen zwischen den Klassennamen stehen muss.

PS.
Ich war zu langsam ;o)