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
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…
- 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,…
- 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…
Hey, das ist ja cool. Vielen Dank!
Und wie mache ich das wenn ich durch den hover über element1, element2 eine klasse zuweisen möchte?
Du übergibst anstelle von this einfach das betreffende Element mit document.getElementById(‚element1‘):