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

2775

Wie kann ich eine Klasse eines HTML-Elements als Reaktion auf ein onclickEreignis mithilfe von JavaScript ändern ?

Nathan Smith
quelle
28
"Das Klassenattribut wird meistens verwendet, um auf eine Klasse in einem Stylesheet zu verweisen. Es kann jedoch auch von einem JavaScript (über das HTML-DOM) verwendet werden, um Änderungen an HTML-Elementen mit einer bestimmten Klasse vorzunehmen." - w3schools.com/tags/att_standard_class.asp
Triynko
11
element.setAttribute(name, value); Ersetzen namedurch class. Ersetzen valueSie die Klasse durch einen beliebigen Namen, der in Anführungszeichen gesetzt ist. Dadurch muss nicht die aktuelle Klasse gelöscht und eine andere hinzugefügt werden. Dieses jsFiddle-Beispiel zeigt den vollständigen Arbeitscode .
Alan Wells
3
Um eine Klasse von HTML-Elementen mit onClick zu ändern, verwenden Sie diesen Code: <input type='button' onclick='addNewClass(this)' value='Create' /> und im Javascript-Abschnitt: function addNewClass(elem){ elem.className="newClass";} Online
Iman Bahrampour
@Triynko - dieser Link auf w3schools hat sich geändert, sieht aus wie im September 2012. Hier ist diese Seite auf Archive.org vom 12. September 2012: HTML-Klasse Attribute-w3schools . Hier ist der Link für die Ersatzseite auf w3schools.com: HTML-Klasse Attribute-w3schools .
Kevin Fegan

Antworten:

3881

Moderne HTML5-Techniken zum Klassenwechsel

Moderne Browser haben classList hinzugefügt , das Methoden bereitstellt, mit denen Klassen einfacher bearbeitet werden können, ohne dass eine Bibliothek erforderlich ist:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Leider funktionieren diese in Internet Explorer vor Version 10 nicht, obwohl es eine Unterlegscheibe gibt , mit der IE8 und IE9 unterstützt werden können, die auf dieser Seite verfügbar sind . Es wird jedoch immer mehr unterstützt .

Einfache browserübergreifende Lösung

Die Standardmethode für die Auswahl eines Elements in JavaScript ist die Verwendung. Dies wird in document.getElementById("Id")den folgenden Beispielen verwendet. Sie können Elemente natürlich auch auf andere Weise abrufen und in der richtigen Situation einfach verwenden. Eine thisausführliche Beschreibung hierzu liegt jedoch außerhalb des Rahmens der Antwort.

So ändern Sie alle Klassen für ein Element:

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.)

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

Um einem Element eine Klasse 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";

So entfernen Sie eine Klasse aus einem Element:

Um eine einzelne Klasse aus einem Element zu entfernen, ohne andere potenzielle Klassen zu beeinflussen, ist ein einfaches Ersetzen des regulären Ausdrucks erforderlich:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Eine Erklärung für diesen regulären Ausdruck lautet wie folgt:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

Das gFlag weist das Ersetzen an, es nach Bedarf zu wiederholen, falls der Klassenname mehrmals hinzugefügt wurde.

So überprüfen Sie, ob eine Klasse bereits auf ein Element angewendet wurde:

Der gleiche reguläre Ausdruck, der oben zum Entfernen einer Klasse verwendet wurde, kann auch verwendet werden, um zu überprüfen, ob eine bestimmte Klasse vorhanden ist:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Zuweisen dieser Aktionen zu Onclick-Ereignissen:

Es ist zwar möglich, JavaScript direkt in die HTML-Ereignisattribute (z. B. onclick="this.className+=' MyClass'") zu schreiben, dies wird jedoch nicht empfohlen. Insbesondere bei größeren Anwendungen wird durch die Trennung von HTML-Markup und JavaScript-Interaktionslogik ein besser wartbarer Code erzielt.

Der erste Schritt, um dies zu erreichen, besteht darin, eine Funktion zu erstellen und die Funktion im onclick-Attribut aufzurufen, zum Beispiel:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Es ist nicht erforderlich, diesen Code in Skript-Tags zu haben. Dies dient lediglich der Kürze und möglicherweise ist es besser, das JavaScript in eine bestimmte Datei aufzunehmen.)

Der zweite Schritt besteht darin, das Ereignis onclick aus dem HTML-Code in JavaScript zu verschieben, z. B. mithilfe von addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Beachten Sie, dass der Teil window.onload erforderlich ist, damit der Inhalt dieser Funktion ausgeführt wird, nachdem der HTML-Code vollständig geladen wurde. Andernfalls ist MyElement möglicherweise nicht vorhanden, wenn der JavaScript-Code aufgerufen wird, sodass diese Zeile fehlschlägt.)


JavaScript-Frameworks und -Bibliotheken

Der obige Code ist alles in Standard-JavaScript. Es ist jedoch üblich, entweder ein Framework oder eine Bibliothek zu verwenden, um allgemeine Aufgaben zu vereinfachen und von behobenen Fehlern und Randfällen zu profitieren, an die Sie beim Schreiben Ihres Codes möglicherweise nicht denken.

Während einige Leute es für übertrieben halten, ein ~ 50-KB-Framework zum einfachen Ändern einer Klasse hinzuzufügen, ist es eine Überlegung wert, wenn Sie eine erhebliche Menge an JavaScript-Arbeit ausführen oder etwas, das möglicherweise ein ungewöhnliches browserübergreifendes Verhalten aufweist.

(Eine Bibliothek besteht grob gesagt aus einer Reihe von Werkzeugen, die für eine bestimmte Aufgabe entwickelt wurden, während ein Framework im Allgemeinen mehrere Bibliotheken enthält und eine vollständige Reihe von Aufgaben ausführt.)

Die obigen Beispiele wurden unten mit jQuery reproduziert , der wahrscheinlich am häufigsten verwendeten JavaScript-Bibliothek (obwohl es auch andere gibt, die es wert sind, untersucht zu werden).

(Beachten Sie, dass $hier das jQuery-Objekt ist.)

Klassen mit jQuery ändern:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Darüber hinaus bietet jQuery eine Verknüpfung zum Hinzufügen einer Klasse, wenn diese nicht zutreffend ist, oder zum Entfernen einer Klasse, die Folgendes tut:

$('#MyElement').toggleClass('MyClass');


Zuweisen einer Funktion zu einem Klickereignis mit jQuery:

$('#MyElement').click(changeClass);

oder ohne Ausweis:

$(':button:contains(My Button)').click(changeClass);


Peter Boughton
quelle
105
Tolle Antwort Peter. Eine Frage ... warum ist es besser , mit JQuery als mit Javascript zu arbeiten? JQuery ist großartig, aber wenn dies alles ist, was Sie tun müssen - was rechtfertigt es, das gesamte JQuery-Libray anstelle einiger Zeilen JavaScript einzuschließen?
Mattstuehler
23
@mattstuehler 1) Der Ausdruck "besser noch x" bedeutet oft "besser noch (du kannst) x". 2) Um die Sache auf den Punkt zu bringen, wurde jQuery entwickelt, um den Zugriff auf / die Manipulation des DOM zu erleichtern, und sehr oft, wenn Sie so etwas tun müssen, wenn Sie es überall tun müssen.
Barry
31
Ein Fehler bei dieser Lösung: Wenn Sie mehrmals auf Ihre Schaltfläche klicken, wird die Klasse "MyClass" mehrmals zum Element hinzugefügt, anstatt zu überprüfen, ob sie bereits vorhanden ist. So könnten Sie mit einem HTML-Klassenattribut enden, das class="button MyClass MyClass MyClass"
ungefähr so ​​aussieht
35
Wenn Sie versuchen, eine Klasse 'myClass' zu entfernen, und Sie eine Klasse 'prefix-myClass' haben, wird in dem oben angegebenen regulären Ausdruck zum Entfernen einer Klasse 'prefix-' in Ihrem Klassennamen angezeigt: O
jinglesthula
16
Wow, drei Jahre und 183 positive Stimmen und niemand hat das bis jetzt bemerkt. Dank Jinglesthula habe ich den regulären Ausdruck korrigiert, damit Teile von Klassennamen nicht falsch entfernt werden. // Ich denke, dies ist ein gutes Beispiel dafür, warum es sich lohnt, ein Framework (wie jQuery) zu verwenden - Fehler wie dieser werden früher erkannt und behoben und erfordern keine Änderungen am normalen Code.
Peter Boughton
422

Sie könnten auch einfach tun:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Und um eine Klasse umzuschalten (entfernen, falls vorhanden, sonst hinzufügen):

document.getElementById('id').classList.toggle('class');
Tyilo
quelle
63
Ich glaube, das ist HTML5-abhängig.
John
12
Du brauchst Eli Greys classListUnterlegscheibe.
ELLIOTTCABLE
15
Mozilla Developer Network gibt an, dass es in Internet Explorers unter 10 nativ nicht funktioniert. Ich finde, dass die Aussage in meinen Tests wahr ist. Anscheinend wird der Eli Gray Shim für Internet Explorer 8-9 benötigt. Leider konnte ich es auf seiner Seite nicht finden (auch bei der Suche). Die Unterlegscheibe ist über den Mozilla-Link verfügbar.
doubleJ
4
atow "classList" unterstützt teilweise IE10 +; keine Unterstützung für Opera Mini; sonst volle Unterstützung in verbleibenden Standardbrowsern: caniuse.com/#search=classlist
Nick Humphrey
119

In einem meiner alten Projekte, in denen jQuery nicht verwendet wurde, habe ich die folgenden Funktionen zum Hinzufügen, Entfernen und Überprüfen, ob das Element eine Klasse hat, erstellt:

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, ' ');
    }
}

Wenn ich beispielsweise onclickder Schaltfläche eine Klasse hinzufügen möchte , kann ich Folgendes verwenden:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Inzwischen wäre es sicher besser, jQuery zu verwenden.

Andrew Orsich
quelle
8
Dies ist ideal, wenn Ihr Client die Verwendung von jQuery nicht zulässt. (Weil Sie am Ende fast Ihre eigene Bibliothek bauen.)
Mike
1
@Mike Wenn der Client nicht zulässt, dass Sie jQuery verwenden, können Sie dann nicht einfach nur die Funktionen, die Sie benötigen, in Ihrer eigenen Bibliothek neu erstellen?
kfrncs
5
@kfrncs Weil ich im Allgemeinen kein so großes Framework brauche. Für das Projekt, an das ich dachte, waren die einzigen Funktionen, die ich brauchte, die 3 Klassennamenfunktionen (hat, hinzufügt, entfernt) und die Cookie-Funktionen (hat, hinzugefügt, entfernt). Alles andere war entweder benutzerdefiniert oder von Haus aus gut unterstützt. Also war alles zusammen nur 150 Zeilen vor dem Minimieren, einschließlich Kommentare.
Mike
2
Alter, es ist 4 Uhr morgens und vielen Dank. Vanilla JS verwenden wir für mein Projekt und dies war ein Lebensretter.
LessQuesar
Dies ist meine Lieblingslösung dafür. Ich benutze es überall. Ich glaube, es ist der eleganteste Weg, Klassen hinzuzufügen und zu entfernen, wenn Ihr Projekt noch keine andere Möglichkeit hat, dies zu tun.
WebWanderer
77

Sie können node.classNamewie folgt verwenden:

document.getElementById('foo').className = 'bar';

Dies sollte in IE5.5 und höher gemäß PPK funktionieren .

Eric Wendelin
quelle
11
Dies würde alle anderen Klassen des Objekts überschreiben ... also ist es nicht so einfach.
Eric Sebasta
51

Wow, überrascht, dass es hier so viele Overkill-Antworten gibt ...

<div class="firstClass" onclick="this.className='secondClass'">
Travis J.
quelle
14
Ich würde sagen, unauffälliges Javascript ist eine schreckliche Praxis für das Schreiben von Beispielcode ...
Gabe
22
Ich würde nicht zustimmen, weil ich denke, dass Beispielcode ein gutes Beispiel sein sollte.
Thomasrutter
1
Ein gutes Beispiel sollte gleichzeitig die Fantasie anregen und anregen. Es sollte Gedanken nicht ersetzen, sondern inspirieren.
Anthony Rutledge
4
Die anderen Antworten sind nicht übertrieben, sondern behalten auch vorhandene Klassen für das Element bei.
Gcampbell
47

Verwenden 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);
    }
}
PseudoNinja
quelle
33

Das funktioniert bei mir:

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
Gopal Krishna Ranjan
quelle
Hervorragende Antwort! Nur noch zum Hinzufügen: Legen Sie für jeden CSS-Klassennamen für den Selektor einen Stil für eine Gruppe von Klassenelementen fest
Roman Polen.
Dies funktioniert bei FF, aber wenn ich versucht habe, el.className = "newStyle" zu verwenden; es hat nicht funktioniert, warum?
Lukasz 'Severiaan' Grela
1
Sie können verwenden el.setAttribute('class', newClass)oder besser el.className = newClass. Aber nicht el.setAttribute('className', newClass).
Oriol
20

Sie können auch das HTMLElement-Objekt erweitern, um Methoden zum Hinzufügen, Entfernen, Umschalten und Überprüfen von Klassen ( gist ) 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 so verwenden (beim Klicken wird die Klasse hinzugefügt oder entfernt):

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

Hier ist eine Demo .

Moka
quelle
1
Dieser ist ein wenig ausführlich ... hier ist eine sehr prägnante Lösung ... jsfiddle.net/jdniki/UaT3P
zero_cool
5
Sorry @Jackson_Sandland, aber du hast den Punkt völlig verpasst, jQuery überhaupt nicht zu verwenden.
Moka
17

Um Informationen aus einem anderen beliebten Framework, Google Closures, hinzuzufügen, sehen Sie sich deren Dom / Klassen- Klasse an:

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

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

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

Eine Option zum Auswählen des Elements ist die Verwendung von goog.dom.query mit einem CSS3-Selektor:

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

Ein paar kleine Anmerkungen und Verbesserungen zu den vorherigen regulären Ausdrücken:

Sie sollten dies global tun, falls die Klassenliste mehr als einmal den Klassennamen enthält. Und wahrscheinlich möchten Sie Leerzeichen von den Enden der Klassenliste entfernen und mehrere Leerzeichen in ein Leerzeichen konvertieren, um zu verhindern, dass Leerzeichen ausgeführt werden. Keines dieser Dinge sollte ein Problem sein, wenn der einzige Code, der mit den Klassennamen verknüpft ist, den folgenden regulären Ausdruck verwendet und einen Namen entfernt, bevor er hinzugefügt wird. Aber. Nun, wer weiß, wer sich vielleicht mit der Klassennamenliste beschäftigt.

Bei diesem regulären Ausdruck wird die Groß- und Kleinschreibung nicht berücksichtigt, sodass Fehler in Klassennamen auftreten können, bevor der Code in einem Browser verwendet wird, bei dem Groß- und Kleinschreibung in Klassennamen nicht berücksichtigt wird.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
Alex Robinson
quelle
13

Ändern Sie die CSS-Klasse eines Elements mit JavaScript in ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub
Hiren Kansara
quelle
13

Ich würde jQuery verwenden und so etwas schreiben:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Dieser Code fügt eine Funktion hinzu, die aufgerufen werden soll, wenn auf ein Element der ID some-element geklickt wird. Die Funktion anhängt geklickt , um das Element der Klasse Attribut , wenn es nicht bereits ein Teil davon ist, und entfernt sie , wenn es da ist.

Ja, Sie müssen einen Verweis auf die jQuery-Bibliothek auf Ihrer Seite hinzufügen, um diesen Code verwenden zu können, aber zumindest können Sie sicher sein, dass die meisten Funktionen in der Bibliothek in nahezu allen modernen Browsern funktionieren, und Sie sparen Zeit bei der Implementierung Ihren eigenen Code, um dasselbe zu tun.

Vielen Dank

Shingokko
quelle
8
Sie müssen nur einmal jQueryin seiner langen Form schreiben . jQuery(function($) { });stellt $in allen Fällen innerhalb der Funktion zur Verfügung.
ThiefMaster
10

Die Linie

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

sollte sein:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
Eric Bailey
quelle
8
Falsch. Der RegEx wird durch die Schrägstriche begrenzt. Das Hinzufügen von Anführungszeichen führt dazu, dass es im IE fehlschlägt und die Zeichenfolge der Klasse zurückgibt, die Sie entfernen möchten, anstatt die Klasse tatsächlich zu entfernen.
Dylan
9

Ändern Sie die Klasse eines Elements in Vanilla JavaScript mit IE6-Unterstützung

Sie können versuchen, die Knoteneigenschaft attributeszu verwenden, um die Kompatibilität mit alten Browsern auch mit IE6 aufrechtzuerhalten:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>

Eugene Tiurin
quelle
8

Hier ist meine voll funktionsfähige Version:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Verwendungszweck:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
Alfred
quelle
4
Dadurch wird die Klasse foobarunterbrochen, wenn Sie versuchen, die Klasse zu entfernen foo. Das JS in den intrinsischen Ereignishandlerattributen wurde vor der Bearbeitung beschädigt. Die 4 Jahre alte akzeptierte Antwort ist viel besser.
Quentin
1
Danke, ich habe es behoben (nicht das Präfix-Problem). Es ist die alte akzeptierte Antwort, die einen Fehler mit dem regulären Ausdruck hat.
Alfred
Der Code hat immer noch das foobarProblem. Sehen Sie den Test hier
rosell.dk
8

Hier ist eine toggleClass zum Umschalten / Hinzufügen / Entfernen einer Klasse für ein Element:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

siehe jsfiddle

Siehe auch meine Antwort hier zum dynamischen Erstellen einer neuen Klasse

Kofifus
quelle
6

Ich verwende die folgenden Vanille-JavaScript-Funktionen in meinem Code. Sie verwenden reguläre Ausdrücke und indexOferfordern keine Anführungszeichen in regulären Ausdrücken.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Sie können element.classList auch in modernen Browsern verwenden.

Salman A.
quelle
3

DIE OPTIONEN.

Im Folgenden finden Sie einige Beispiele für Stil und Klassenliste, mit denen Sie sehen können, welche Optionen Ihnen zur Verfügung stehen und wie classListSie das tun können, was Sie möchten.

style vs. classList

Der Unterschied zwischen styleund classListist , dass mit styleIhnen zu den Style - Eigenschaften des Elements sind hinzufügen, aber classListirgendwie ist die Steuerung der Klasse (n) des Elements ( add, remove, toggle, contain), werde ich Ihnen zeigen , wie das verwenden , addund removeda diese Verfahren sind die beliebtesten.


Stilbeispiel

Wenn Sie margin-topeinem Element eine Eigenschaft hinzufügen möchten , gehen Sie folgendermaßen vor:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

classList Beispiel

Lassen Sie sagen , wir haben <div class="class-a class-b">, in diesem Fall haben wir zwei Klassen in unserem div Element hinzugefügt schon, class-aund class-b, und wir wollen , welche Klassen steuern removeund was Klasse add. Das ist woclassList wird es praktisch.

Entfernen class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Hinzufügen class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Farhad
quelle
1

Ich dachte nur, ich würde das einwerfen:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}
StackSlave
quelle
1

Sagen myElement.classList="new-class"Sie einfach, es sei denn, Sie müssen andere vorhandene Klassen pflegen. In diesem Fall können Sie die classList.add, .removeMethoden verwenden.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

Ronnie Royston
quelle
1

OK, ich denke in diesem Fall sollten Sie jQuery verwenden oder Ihre eigenen Methoden in reinem Javascript schreiben. Ich bevorzuge es, meine eigenen Methoden hinzuzufügen, anstatt alle jQuery in meine Anwendung einzufügen, wenn ich das aus anderen Gründen nicht benötige.

Ich möchte meinem Javascript-Framework die folgenden Methoden als Methoden hinzufügen, um einige Funktionen hinzuzufügen, die das Hinzufügen von Klassen, das Löschen von Klassen usw. ähnlich wie bei jQuery ermöglichen. Dies wird in IE9 + vollständig unterstützt, und mein Code ist in ES6 geschrieben Um sicherzustellen, dass Ihr Browser dies unterstützt oder Sie etwas wie babel verwenden, müssen Sie ansonsten die ES5-Syntax in Ihrem Code verwenden. Auch auf diese Weise finden wir das Element über die ID. Dies bedeutet, dass für das Element eine ID ausgewählt werden muss:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

und Sie können sie einfach wie folgt aufrufen. Stellen Sie sich vor, Ihr Element hat die ID 'id' und die Klasse 'class'. Stellen Sie sicher, dass Sie sie als Zeichenfolge übergeben. Sie können das util wie folgt verwenden:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
Alireza
quelle
1

classList DOM-API:

Eine sehr bequeme Methode zum Hinzufügen und Entfernen von Klassen ist die classListDOM-API. Mit dieser API können wir alle Klassen eines bestimmten DOM-Elements auswählen, um die Liste mithilfe von Javascript zu ändern. Zum Beispiel:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

Wir können im Protokoll beobachten, dass wir ein Objekt mit nicht nur den Klassen des Elements, sondern auch vielen Hilfsmethoden und -eigenschaften zurückerhalten. Dieses Objekt erbt von der Schnittstelle DOMTokenList , einer Schnittstelle, die im DOM verwendet wird, um eine Reihe von durch Leerzeichen getrennten Token (wie Klassen) darzustellen.

Beispiel:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  

Willem van der Veen
quelle
1

Ja, dafür gibt es viele Möglichkeiten. In der ES6-Syntax können wir leicht erreichen. Verwenden Sie diesen Code, um die Klasse zum Hinzufügen und Entfernen umzuschalten.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

Dänischer Khan
quelle
1
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

Die Verwendung der oben akzeptierten Antwort ist eine einfache browserübergreifende Funktion zum Hinzufügen und Entfernen von Klassen

Klasse hinzufügen:

classed(document.getElementById("denis"), "active", true)

Klasse entfernen:

classed(document.getElementById("denis"), "active", false)
donatso
quelle
1

Viele Antworten, viele gute Antworten.

TL; DR:

document.getElementById('id').className = 'class'

ODER

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Das ist es.

Und wenn Sie wirklich das Warum wissen und sich weiterbilden möchten, dann schlage ich vor, die Antwort von Peter Boughton zu lesen , es ist perfekt.

Hinweis:
Dies ist möglich mit ( Dokument oder Ereignis ):

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()
tfont
quelle
1

In Javascript gibt es eine Eigenschaft className , um den Namen der Klasse eines HTML-Elements zu ändern. Der vorhandene Klassenwert wird durch den neuen ersetzt, den Sie in className zugewiesen haben.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Gutschrift - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

Jai Prakash
quelle
1

Die OP-Frage war Wie kann ich die Klasse eines Elements mit JavaScript ändern?

Mit modernen Browsern können Sie dies mit einer Zeile Javascript tun :

document.getElementById('id').classList.replace('span1','span2')

Das classListAttribut stellt eine DOMTokenList bereit, die über verschiedene Methoden verfügt . Sie können die Klassenliste eines Elements mit einfachen Manipulationen wie add () , remove () oder replace () bearbeiten . Oder werden Sie sehr raffiniert und manipulieren Sie Klassen wie ein Objekt oder eine Map mit Schlüsseln () , Werten () , Einträgen ()

Peter Boughtons Antwort ist großartig, aber jetzt ist sie über ein Jahrzehnt alt. Alle modernen Browser unterstützen jetzt DOMTokenList - siehe https://caniuse.com/#search=classList, und sogar IE11 unterstützt einige DOMTokenList-Methoden

Timbo
quelle
1

Versuchen

element.className='second'

Kamil Kiełczewski
quelle
-2

Funktionierender JavaScript-Code:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Sie können einen Arbeitscode von diesem Link herunterladen .

Sajid
quelle
1
Dadurch werden Elemente mit mehr als einer Klasse unterbrochen.
Gcampbell
-4

Hier ist einfacher jQuery-Code, um dies zu tun.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Hier,

  • Class1 ist ein Listener für ein Ereignis.
  • Die übergeordnete Klasse ist die Klasse, in der sich die Klasse befindet, die Sie ändern möchten
  • Classtoremove ist die alte Klasse, die Sie haben.
  • Die hinzuzufügende Klasse ist die neue Klasse, die Sie hinzufügen möchten.
  • 100 ist die Zeitüberschreitungsverzögerung, während der die Klasse geändert wird.

Viel Glück.

uttamcafedeweb
quelle