Mit Javascript CSS Klassen hinzufügen und entfernen

Veröffentlicht am von
Werbung

Hier ein Beispiel um CSS Klassen einem Objekt zuzuordnen oder wieder zu entfernen. Dazu gibt es hier drei Javascript Funktionen.

HTML

Test

CSS

.over { background-color: #cc0000; }

Javascript

Werbung
function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
Für eine Demo einfach hier drüberfahren

Auch interessant:

  • Union Types in PHP Ab PHP 8.0 sind Union Types einsetzbar. Damit sind jetzt auch mehrere Definitionen von Datentypen bei Parametern, Eigenschaften und Rückgabewerten möglich. Ab PHP 8.2 sind auch Intersection Types möglich, das…
  • Die wichtigsten Neuerungen in PHP 8.4: Was… PHP 8.4, das am 21. November 2024 erscheint, bringt eine Reihe von bedeutenden Neuerungen und Optimierungen für Entwickler mit. Mit Verbesserungen wie den Property Hooks, erweiterten Möglichkeiten für HTML5-Verarbeitung und…
  • PHP Modul ctype: Überprüfen von Zeichenketten mit… Das PHP Modul ctype bietet dir Funktionen, die es ermöglichen, den Typ von Zeichen in einer Zeichenkette zu überprüfen. Du kannst zum Beispiel überprüfen, ob alle Zeichen in einer Zeichenkette Buchstaben, Ziffern,…
  • WordPress und Docker: Die perfekte Entwicklungsumgebung Docker ist ziemlich genial. Und wer für WordPress-Themes oder Plug-ins entwickelt, der wird die Vorteile der Nutzung von Docker sehr schnell merken. Hier zeige ich dir, wie du das schnell…
  • Vom Junior zum Senior-Entwickler: Ein Wandel in der… Der Übergang vom Junior-Entwickler zum Senior-Entwickler ist nicht nur eine Frage der Erfahrung oder der technischen Fähigkeiten – es erfordert einen grundlegenden Wandel in der Denkweise. Viele Entwickler beginnen ihre…