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

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

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

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.

Sie können node.classNamewie folgt verwenden:

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

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

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

<div class="firstClass" onclick="this.className='secondClass'">

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

Das funktioniert bei mir:

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

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

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 .

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];

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, ' ') + "]");

Ä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

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

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

Ä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>

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")' >

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

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.

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

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

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>

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

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>
  

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>

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)

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

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

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

Versuchen

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

<div onclick="change(this)" class="first">Click me</div>

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 .

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.