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:

  • 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,…
  • 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…
  • Warum man in Blade lieber @if(! $user->isAdmin)… In Laravel Blade, der Templating-Engine des Frameworks, haben Entwickler verschiedene Möglichkeiten, Bedingungen in Templates zu implementieren. Ein häufiges Thema bei der Arbeit mit Bedingungslogik ist die Wahl zwischen den beiden…