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…
  • Flutter: AppBar spielend einfach hinzufügen Je nachdem wie du ein neues Flutter Projekt erstellt hast, siehst du bereits eine AppBar. Ich bin eher der Freund davon, eine mit einer sauberen Anwendung zu beginnen. Daher habe…
  • 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…
  • Flutter: Roten Debug Banner entfernen Nach dem Start einer Flutter App mit einem Emulator siehst du in der rechten oberen Ecke einen Debug Banner. Oft braucht man den Banner nicht, weil man ja weiß, dass…
  • 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,…