In HTML zur Laufzeit die CSS-Klasse austauschen

Immer wieder ist es in meinen Webprojekten erforderlich, HTML-Elemente oder ganze Gruppen von Elementen mit anderen Stylesheets-Klassen (CSS) während der Laufzeit zu bestücken. Javascript hilft hier weiter, damit kann man nämlich die Klassen „togglen“, also austauschen.

Dazu sind aber ein paar kleinere Schritte (functions) notwendig.

  1. Untersuchen, ob dem Dom-Objekt die Klasse schon zugeordnet wurde
  2. Wenn JA, das Objekt entfernen
  3. Die  neue Klasse zuordnen; dabei auch prüfen, ob sie nicht schon zugeordnet ist.

Zunächst einmal wollen wir in einem Objekt (hier: „item“) prüfen, ob die CSS-Klasse nicht bereits zugewiesen wurde.

Jedes DOMObjekt hat zur Laufzeit eine Property „className“, die die zugewiesenen Klassen in einem String enthält. Details dazu finden Sie auf Mozilla.org.

Mittels RegularExpressions kann nun nach dem Klassennamen gesucht werden (kryptisch: ‚(\\s|^)‘ + assignedClass + ‚(\\s|$)‘)
Gibt es kein result, wird der Defaultwert „false“ zurückgeliefert, die Klasse ist also nicht enthalten:

 /* hat ein Element eine CSS-Klasse? */
/* item ist ein Objekt aus der DOM-Hierarchy (= getItembyID()) */
/* assignedClass ist der Name der CSS-Klasse, nach der gesucht werden soll */
 function ItemHasCSSClassAssigned(item, assignedClass) {
 var result = false;
 if(!(item == null)) {
 result = item.className.match(new RegExp('(\\s|^)' + assignedClass + '(\\s|$)'));
 }
 return result;
 }

In einer übergeordneten Funktion kann nun die Zuweisung erfolgen; dabei wird geprüft, ob nicht bereits zugewiesen wurde:

/* Einem Element eine Klasse zuweisen: */
 function AssignClassToItem(item, assignableClass) {
 if(!ItemHasCSSClassAssigned(item,assignableClass)) {
 item.className += " " + assignableClass;
 }
 }

Das Entfernen einer Klasse geht ebenfalls über die Eigenschaft „className“. Dabei wird der zu entfernende Name der CSS-Klasse in dem String durch ein Leerzeichen ersetzt. Dann sieht die Funktion zum Entfernen so aus:


/* Eine Klasse aus einem Element entfernen: */
 function ResignClassFromItem(item, resignableClass) {
 if (ItemHasCSSClassAssigned(item, resignableClass)) {
 var classString = new RegExp('(\\s|^)' + resignableClass + '(\\s|$)');
 item.className = item.className.replace(classString, ' ');
}

}

Jetzt kann der Austausch einfach erfolgen, in dem man die oben genannten Funktionen in einer einzigen Funktion aufruft. Zuerst wird die „alte“ Klasse entzogen, anschliessend die „neue“ Klasse dem Objekt zugeordnet:

</pre>
/* Eine Klasse durch eine andere ersetzen */
 function ReplaceAssignedClass(item,oldClass,newClass) {
 ResignClassFromItem(item, oldClass);
 AssignClassToItem(item, newClass);
 }

Noch einen draufsetzen kann man, indem man immer die gerade aktive Klasse durch eine inaktive Klasse austauschen kann. Auch das ist mit nun möglich:


/* Wechselt zwischen Klasse1 und Klasse2, jenachdem welche gesetzt war */
/*item ist das HTML-Objekt, class1 und class2 sind die CSS-Klassennamen (Strings) */
 function ToggleClass(item, class1, class2) {
 if (ItemHasCSSClassAssigned(item, class1)) {
 ReplaceAssignedClass(item, class1, class2);
 } else if (ItemHasCSSClassAssigned(item, class2)) {
 ReplaceAssignedClass(item, class2, class1);
 } else {
 AssignClassToItem(item, class1);
 }
 }

Hier halten Sie Antworten gleich auf mehrere Fragen  in der Hand: Wie kann ich herausfinden, ob eine CSS-Klasse einem HTML-Element zugeordnet ist? Wie kann ich eine CSS-Klasse einem HTML-Element zuweisen? Wie kann ich eine CSS-Klasse durch eine andere ersetzen?  Ein paar Zeilen Javascript!

Advertisements
%d Bloggern gefällt das: