Frage Wie füge ich einem gegebenen Element eine Klasse hinzu?


Ich habe ein Element, das bereits eine Klasse hat:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Jetzt möchte ich eine Javascript-Funktion erstellen, die eine Klasse zu der hinzufügt div (nicht ersetzen, sondern hinzufügen).

Wie kann ich das machen?


919
2018-02-03 13:54


Ursprung


Antworten:


Fügen Sie dem Feld ein Leerzeichen und den Namen Ihrer neuen Klasse hinzu className Eigenschaft des Elements. Zuerst setze ein id auf dem Element, so dass Sie leicht eine Referenz erhalten können.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Dann

var d = document.getElementById("div1");
d.className += " otherclass";

Siehe auch element.className in MDN.


1640
2018-02-03 13:58



Der einfachste Weg, dies ohne einen Rahmen zu tun, ist zu verwenden element.classList.add Methode.

var element = document.getElementById("div1");
element.classList.add("otherclass");

Bearbeiten: Und wenn Sie die Klasse von einem Element entfernen möchten -

element.classList.remove("otherclass");

Ich bevorzuge es, keinen leeren Platz hinzufügen zu müssen und die Eingabe von Einträgen selbst zu duplizieren (was bei Verwendung des document.className Ansatz). Dort sind einige Browser-Einschränkungen, aber Sie können mit ihnen umgehen Polyfüllungen.


1036
2017-12-31 12:12



finde dein Zielelement "d" wie du willst und dann:

d.className += ' additionalClass'; //note the space

Sie können dies auf klügere Weise umprägen, um die Existenz zu überprüfen und nach Platzanforderungen usw. zu suchen.


171
2018-02-03 14:01



Klasse hinzufügen

  • Kreuzkompatibel

    Im folgenden Beispiel fügen wir a hinzu classname zum <body> Element. Dies ist IE-8-kompatibel.

    var a = document.body;
    a.classList ? a.classList.add('classname') : a.className += ' classname';
    

    Dies ist eine Abkürzung für folgendes ..

    var a = document.body;
    if (a.classList) {
        a.classList.add('wait');
    } else {
        a.className += ' wait';
    }
    

  • Performance

    Wenn Sie mehr Wert auf die Leistung als auf die Kreuzkompatibilität legen, können Sie diese auf 4% verkürzen.

    var z = document.body;
    document.body.classList.add('wait');
    

  • Bequemlichkeit

    Alternativ könnten Sie jQuery verwenden, aber die resultierende Leistung ist wesentlich langsamer. Laut jsPerf 94% langsamer

    $('body').addClass('wait');
    


Entfernen der Klasse

  • Performance

    Die selektive Verwendung von jQuery ist die beste Methode zum Entfernen einer Klasse, wenn es um die Leistung geht

    var a = document.body, c = ' classname';
    $(a).removeClass(c);
    

  • Ohne jQuery ist es 32% langsamer

    var a = document.body, c = ' classname';
    a.className = a.className.replace( c, '' );
    a.className = a.className + c;
    

Verweise

  1. jsPerf-Testfall: Hinzufügen einer Klasse
  2. jsPerf Testfall: Entfernen einer Klasse

Verwenden von Prototyp

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Verwenden von YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

116
2017-12-22 23:29



Ein weiterer Ansatz zum Hinzufügen der Klasse zu Elementen mithilfe von reinem JavaScript

Zum Hinzufügen einer Klasse:

document.getElementById("div1").classList.add("classToBeAdded");

Zum Entfernen der Klasse:

document.getElementById("div1").classList.remove("classToBeRemoved");

32
2017-09-23 11:15



Angenommen, Sie tun mehr als nur diese eine Klasse hinzufügen (zB haben Sie asynchrone Anfragen und so weiter), würde ich eine Bibliothek wie empfehlen Prototyp oder jQuery.

Dies macht fast alles, was Sie tun müssen (einschließlich dieser) sehr einfach.

Nehmen wir an, Sie haben jetzt jQuery auf Ihrer Seite, Sie könnten Code wie diesen verwenden, um einem Element einen Klassennamen hinzuzufügen (in diesem Fall beim Laden):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Besuche die jQuery API-Browser für andere Sachen.


20
2018-02-03 14:00



Wenn die Arbeit, die ich mache, nicht die Verwendung einer Bibliothek rechtfertigt, verwende ich diese zwei Funktionen:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

20
2018-02-03 14:40



Sie können die classList.add-Methode oder die classList.remove-Methode zum Hinzufügen / Entfernen einer Klasse aus einem Element verwenden.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

Der obige Code wird eine Klasse "anyclass" zu nameElem hinzufügen (und NICHT ersetzen). In ähnlicher Weise können Sie die classList.remove () -Methode verwenden, um eine Klasse zu entfernen.

nameElem.classList.remove("anyclss")

14
2017-08-10 08:59



So fügen Sie einem Element eine zusätzliche Klasse hinzu:

Um eine Klasse zu einem Element hinzuzufügen, ohne vorhandene Werte zu entfernen / zu beeinflussen, fügen Sie ein Leerzeichen und den neuen Klassennamen wie folgt hinzu:

document.getElementById("MyElement").className += " MyClass";

Um alle Klassen für ein Element zu ändern:

Um alle vorhandenen Klassen durch eine oder mehrere neue Klassen zu ersetzen, legen Sie das Attribut className fest:

document.getElementById("MyElement").className = "MyClass";

(Sie können eine durch Leerzeichen getrennte Liste verwenden, um mehrere Klassen anzuwenden.)


9
2017-08-20 08:38