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

Für IE v6-9 (bei dem classList nicht unterstützt wird und Sie keine Polyfills verwenden möchten):

var elem = document.getElementById('some-id');

// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';

elem.setAttribute('class', classList);

Answer 2

Versuchen Sie es:

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>

Answer 3

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 jQuery in meine Anwendung zu injizieren, wenn ich das nicht aus anderen Gründen brauche.

Ich möchte etwas wie unten als Methoden zu meinem JavaScript-Framework zu tun, um einige Funktionalitäten, die Hinzufügen von Klassen, Löschen von Klassen, etc. behandeln hinzuzufügen. Ähnlich wie jQuery, ist dies vollständig in IE9+ unterstützt. Auch mein Code ist in ES6 geschrieben, so müssen Sie sicherstellen, dass Ihr Browser unterstützt es oder Sie mit etwas wie Babel sonst müssen Sie die ES5-Syntax in Ihrem Code verwenden. Auch auf diese Weise finden wir Elemente über ID, was bedeutet, dass das Element eine ID haben muss, um ausgewählt zu werden:

// Simple JavaScript utilities 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 unten beschrieben verwenden. Stellen Sie sich vor, Ihr Element hat eine id von "id" und eine class von "class". Stellen Sie sicher, dass Sie sie als String übergeben. Sie können das Dienstprogramm wie unten beschrieben verwenden:

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

Answer 4

classList DOM API:

Eine sehr praktische Methode zum Hinzufügen und Entfernen von Klassen ist die classList DOM API. Diese API ermöglicht es uns, alle Klassen eines bestimmten DOM-Elements auszuwählen, um die Liste mit JavaScript zu ändern. Zum Beispiel:

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

Dem Protokoll können wir entnehmen, dass wir ein Objekt zurückerhalten, das nicht nur die Klassen des Elements, sondern auch viele Hilfsmethoden und Eigenschaften enthält. Dieses Objekt erbt von der Schnittstelle DOMTokenList eine Schnittstelle, die im DOM verwendet wird, um eine Menge 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>

Answer 5

Ja, es gibt viele Möglichkeiten, dies zu tun. In der ES6-Syntax können wir dies leicht erreichen. Verwenden Sie diesen Code toggle hinzufügen und entfernen Klasse.

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>