Wie kann ich die Klasse eines Elements mit JavaScript ändern?

Question

Wie kann ich die Klasse eines HTML-Elements als Reaktion auf eine onclick oder andere Ereignisse mit JavaScript?

Answer 1

Verwendung von reinem JavaScript-Code:

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

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 replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

Answer 2

4 Aktionen möglich: Hinzufügen, Entfernen, Prüfen und Umschalten

Für jede Aktion gibt es mehrere Möglichkeiten.

1. Klasse hinzufügen

Methode 1: Der beste Weg, eine Klasse in einem modernen Browser hinzuzufügen, ist die Verwendung von classList.add() Methode des Elements.

• Fall 1 : Hinzufügen einer einzelnen Klasse

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding class
    element.classList.add('beautify');
  }

• Fall 2 : Hinzufügen mehrerer Klassen

  Um mehrere Klassen hinzuzufügen, trennen Sie die Klassen durch ein Komma im Feld add() Methode

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.classList.add('class1', 'class2', 'class3');
  }

Methode 2 - Sie können auch Klassen zu HTML-Elementen hinzufügen, indem Sie className Eigentum.

• Fall 1 : Überschreiben bereits existierender Klassen Wenn Sie eine neue Klasse dem className Eigenschaft überschreibt sie die vorherige Klasse.

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.className = 'beautify';
  }

• Fall 2 : Hinzufügen einer Klasse ohne Überschreiben verwenden += Operator für die Klasse, um vorherige Klassen nicht zu überschreiben. Fügen Sie außerdem ein zusätzliches Leerzeichen vor der neuen Klasse ein.

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding single multiple class
    element.className += ' beautify';
    // adding multiple classes
    element.className += ' class1 class2 class3';
  }

---

2. Klasse entfernen

Methode 1 - Der beste Weg, eine Klasse aus einem Element zu entfernen, ist classList.remove() Methode.

• Fall 1 : Einzelne Klasse entfernen

  Übergeben Sie einfach den Klassennamen, den Sie aus dem Element entfernen möchten, in der Methode.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('beautify');
  }

• Fall 2 : Mehrere Klassen entfernen

  Übergeben Sie mehrere Klassen durch ein Komma getrennt.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('class1', 'class2', 'class3');
  }

Methode 2 - Sie können die Klasse auch mit className Methode.

• Fall 1 : Entfernen einer einzelnen Klasse Wenn das Element nur 1 Klasse hat und Sie diese entfernen wollen, dann weisen Sie einfach einen leeren String dem className Methode.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = '';
  }

• Fall 2 : Entfernen mehrerer Klassen Wenn das Element mehrere Klassen hat, werden zuerst alle Klassen aus dem Element entfernt, indem className Eigenschaft und verwenden Sie die replace-Methode und ersetzen Sie die gewünschten Klassen durch eine leere Zeichenkette und weisen Sie diese schließlich den Element]s className Eigentum.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = element.className.replace('class1', '');
  }

---

3. Kontrolle der Klasse

Um zu prüfen, ob eine Klasse in einem Element vorhanden ist, können Sie einfach Folgendes verwenden classList.contains() Methode. Sie liefert true wenn die Klasse existiert, sonst wird false zurückgegeben.

function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.classList.contains('beautify') {
      alert('Yes! class exists');
  }
}

---

4. Klasse umschalten

Um eine Klasse umzuschalten, verwenden Sie classList.toggle() Methode.

function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.classList.toggle('beautify');
}

Answer 3

Das funktioniert bei mir:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Answer 4

Sie können auch das HTMLElement-Objekt erweitern, um Methoden zum Hinzufügen, Entfernen, Umschalten und Prüfen von Klassen hinzuzufügen ( . ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

Und dann einfach wie folgt verwenden (auf Klick wird die Klasse hinzugefügt oder entfernt):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Hier ist Demo .

Answer 5

Nur um Informationen von einem anderen beliebten Framework, Google Closures, hinzuzufügen, siehe deren dom/classes Klasse:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Eine Möglichkeit, das Element auszuwählen, ist die Verwendung von goog.dom.query mit einem CSS-3-Selektor:

var myElement = goog.dom.query("#MyElement")[0];