Schlagwort-Archive: addClass

Mit Javascript CSS Klassen hinzufügen und entfernen

Veröffentlicht am von
1

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

HTML

<div id="testdiv" class="myclass" onmouseover="addClass(this, 'over');" onmouseout="removeClass(this, 'over')">Test</div>

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

Ähnliche Links