it-swarm.com.de

Wie füge ich eine Klasse in JavaScript hinzu?

Da element.classList in IE 9 und Safari-5 nicht unterstützt wird, gibt es eine alternative Cross-Browser-Lösung?

No-Frameworks bitte.

Lösung must funktioniert mindestens in IE 9, Safari 5, FireFox 4, Opera 11.5 und Chrome.

Verwandte Beiträge (enthält jedoch keine Lösung):

  1. wie man CSS-Klasse hinzufügt und entfernt

  2. Eine Klasse mit Animation hinzufügen und entfernen

  3. Klasse hinzufügen hinzufügen?

52
Pacerier

Eine Möglichkeit, mit Klassen ohne Frameworks/Bibliotheken herumzuspielen, besteht darin, die Eigenschaft Element.className zu verwenden, die "ruft den Wert des Klassenattributs des angegebenen Elements ab." (Aus der MDN-Dokumentation ).
Da @ matías-fidemraizer bereits in seiner Antwort erwähnt wurde, können Sie, sobald Sie die Zeichenfolge der Klassen für Ihr Element erhalten haben, alle mit Zeichenfolgen verknüpften Methoden verwenden, um sie zu ändern.

Hier ist ein Beispiel:
Angenommen, Sie haben ein div mit der ID "myDiv" und möchten die Klasse "main__section" hinzufügen, wenn der Benutzer darauf klickt.

window.onload = init;

function init() {
  document.getElementById("myDiv").onclick = addMyClass;
}

function addMyClass() {
  var classString = this.className; // returns the string of all the classes for myDiv
  var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space)
  this.className = newClass; // sets className to the new string
}
17
Yago DLT

Hier ist die Lösung für addClass, removeClass, hasClass in reiner Javascript-Lösung.

Eigentlich ist es von http://jaketrent.com/post/addremove-classes-raw-javascript/

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!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,' ');
  }
}
47
emil

Ich habe gerade diese aufgeschrieben:

function addClass(el, classNameToAdd){
    el.className += ' ' + classNameToAdd;   
}

function removeClass(el, classNameToRemove){
    var elClass = ' ' + el.className + ' ';
    while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
         elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
    }
    el.className = elClass;
}

Ich denke, dass sie in allen Browsern funktionieren.

31
Paulpro

Die einfachste Methode ist element.classList mit den Methoden remove(name), add(name), toggle(name) und contains(name) und ist jetzt wird von allen gängigen Browsern unterstützt .

Bei Browsern mit älterem ändern Sie element.className . Hier sind zwei Helfer:

function addClass(element, className){
    element.className += ' ' + className;   
}

function removeClass(element, className) {
    element.className = element.className.replace(
        new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim();
}
13
Wernight

Lesen Sie diesen Mozilla Developer Network-Artikel:

Da die Eigenschaft element.className vom Typ string ist, können Sie reguläre String-Objektfunktionen in einer beliebigen JavaScript-Implementierung verwenden:

  • Wenn Sie eine Klasse hinzufügen möchten, verwenden Sie zuerst String.indexOf, um zu überprüfen, ob die Klasse in className vorhanden ist. Wenn es nicht vorhanden ist, verketten Sie einfach ein Leerzeichen und den neuen Klassennamen mit dieser Eigenschaft. Wenn es vorhanden ist, tu nichts.

  • Wenn Sie eine Klasse entfernen möchten, verwenden Sie einfach String.replace und ersetzen Sie "[Klassenname]" durch eine leere Zeichenfolge. Verwenden Sie schließlich String.trim, um Leerzeichen am Anfang und Ende von element.className zu entfernen.

10

Schauen Sie sich diese Oneliner an:

  1. Klasse entfernen:

    element.classList.remove('hidden');
    
  2. Toggle class (fügt die Klasse hinzu, falls sie noch nicht vorhanden ist, und entfernt sie, falls vorhanden)

    element.classList.toggle('hidden');
    

Das ist alles! Ich habe einen Test gemacht - 10000 Iterationen. 0,8 s.

7

Die Lösung von @Paulpro wurde behoben

  1. Verwenden Sie nicht "class", da es sich um ein reserviertes Word handelt
  2. removeClass Funktion war defekt, da sie nach wiederholter Verwendung abgehört wurde.

`

function addClass(el, newClassName){
    el.className += ' ' + newClassName;   
}

function removeClass(el, removeClassName){
    var elClass = el.className;
    while(elClass.indexOf(removeClassName) != -1) {
        elClass = elClass.replace(removeClassName, '');
        elClass = elClass.trim();
    }
    el.className = elClass;
}
6
Drew

Die Lösung ist zu

Shim .classList:

Verwenden Sie entweder das DOM-shim oder verwenden Sie Eli Greys Shim unten

Disclaimer: Ich glaube die Unterstützung ist FF3.6 +, Opera10 +, FF5, Chrome, IE8 +

/*
 * classList.js: Cross-browser full element.classList implementation.
 * 2011-06-15
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*global self, document, DOMException */

/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/

if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {

(function (view) {

"use strict";

var
      classListProp = "classList"
    , protoProp = "prototype"
    , elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
    , objCtr = Object
    , strTrim = String[protoProp].trim || function () {
        return this.replace(/^\s+|\s+$/g, "");
    }
    , arrIndexOf = Array[protoProp].indexOf || function (item) {
        var
              i = 0
            , len = this.length
        ;
        for (; i < len; i++) {
            if (i in this && this[i] === item) {
                return i;
            }
        }
        return -1;
    }
    // Vendors: please allow content code to instantiate DOMExceptions
    , DOMEx = function (type, message) {
        this.name = type;
        this.code = DOMException[type];
        this.message = message;
    }
    , checkTokenAndGetIndex = function (classList, token) {
        if (token === "") {
            throw new DOMEx(
                  "SYNTAX_ERR"
                , "An invalid or illegal string was specified"
            );
        }
        if (/\s/.test(token)) {
            throw new DOMEx(
                  "INVALID_CHARACTER_ERR"
                , "String contains an invalid character"
            );
        }
        return arrIndexOf.call(classList, token);
    }
    , ClassList = function (elem) {
        var
              trimmedClasses = strTrim.call(elem.className)
            , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
            , i = 0
            , len = classes.length
        ;
        for (; i < len; i++) {
            this.Push(classes[i]);
        }
        this._updateClassName = function () {
            elem.className = this.toString();
        };
    }
    , classListProto = ClassList[protoProp] = []
    , classListGetter = function () {
        return new ClassList(this);
    }
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
    return this[i] || null;
};
classListProto.contains = function (token) {
    token += "";
    return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token) {
    token += "";
    if (checkTokenAndGetIndex(this, token) === -1) {
        this.Push(token);
        this._updateClassName();
    }
};
classListProto.remove = function (token) {
    token += "";
    var index = checkTokenAndGetIndex(this, token);
    if (index !== -1) {
        this.splice(index, 1);
        this._updateClassName();
    }
};
classListProto.toggle = function (token) {
    token += "";
    if (checkTokenAndGetIndex(this, token) === -1) {
        this.add(token);
    } else {
        this.remove(token);
    }
};
classListProto.toString = function () {
    return this.join(" ");
};

if (objCtr.defineProperty) {
    var classListPropDesc = {
          get: classListGetter
        , enumerable: true
        , configurable: true
    };
    try {
        objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
    } catch (ex) { // IE 8 doesn't support enumerable:true
        if (ex.number === -0x7FF5EC54) {
            classListPropDesc.enumerable = false;
            objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
        }
    }
} else if (objCtr[protoProp].__defineGetter__) {
    elemCtrProto.__defineGetter__(classListProp, classListGetter);
}

}(self));

}
4
Raynos

Für den Fall, dass jemand Prototypfunktionen für Elemente erstellen möchte, verwende ich dies, wenn ich Klassen verschiedener Objekte bearbeiten muss:

Element.prototype.addClass = function (classToAdd) {
  var classes = this.className.split(' ')
  if (classes.indexOf(classToAdd) === -1) classes.Push(classToAdd)
  this.className = classes.join(' ')
}

Element.prototype.removeClass = function (classToRemove) {
  var classes = this.className.split(' ')
  var idx =classes.indexOf(classToRemove)
  if (idx !== -1) classes.splice(idx,1)
  this.className = classes.join(' ')
}

Verwenden Sie sie wie: document.body.addClass('whatever') oder document.body.removeClass('whatever')

Anstelle von body können Sie auch ein anderes Element verwenden (div, span, nennen Sie es)

2
Joanna Betlej
function addClass(element, classString) {
    element.className = element
        .className
        .split(' ')
        .filter(function (name) { return name !== classString; })
        .concat(classString)
        .join(' ');
}

function removeClass(element, classString) {
    element.className = element
        .className
        .split(' ')
        .filter(function (name) { return name !== classString; })
        .join(' ');
}
2
scott_trinh

Verbesserte Version von Emils Code (mit trim ())

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className = ele.className.trim() + " " + cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className = ele.className.replace(reg,' ');
    ele.className = ele.className.trim();
  }
}
1
vagovszkym

cSS-Klassen hinzufügen: cssClassesStr += cssClassName;

cSS-Klassen entfernen: cssClassStr = cssClassStr.replace(cssClassName,"");

attribut 'Klassen' hinzufügen: object.setAttribute("class", ""); //pure addition of this attribute

attribut entfernen: object.removeAttribute("class");

0
reporter

Ein leicht verständlicher Weg:

// Add class 
DOMElement.className += " one";
// Example:
// var el = document.body;
// el.className += " two"

// Remove class 
function removeDOMClass(element, className) {
    var oldClasses      = element.className,
        oldClassesArray = oldClasses.split(" "),
        newClassesArray = [],
        newClasses;

    // Sort
    var currentClassChecked,
        i;     
    for ( i = 0; i < oldClassesArray.length; i++ ) { 
        // Specified class will not be added in the new array
        currentClassChecked = oldClassesArray[i];
        if( currentClassChecked !== className ) { 
            newClassesArray.Push(currentClassChecked);
        }
    }

    // Order 
    newClasses = newClassesArray.join(" ");

    // Apply     
    element.className = newClasses;

    return element;

}
// Example:
// var el = document.body;
// removeDOMClass(el, "two")

https://Gist.github.com/sorcamarian/ff8db48c4dbf4f5000982072611955a2

0
Marian07