it-swarm.com.de

Wie ändert man die Klasse eines Elements mit JavaScript?

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

2443
Nathan Smith

Moderne HTML5-Techniken zum Ändern von Klassen

Moderne Browser haben classList hinzugefügt, das Methoden zur Verfügung stellt, mit denen Klassen leichter ohne Bibliotheken bearbeitet werden können:

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 ein Shim gibt, um die Unterstützung für IE8 und IE9 hinzuzufügen, die unter diese Seite verfügbar ist. Es wird jedoch immer mehr unterstützt .

Einfache Browserübergreifende Lösung

Die Standard-JavaScript-Methode zur Auswahl eines Elements ist document.getElementById("Id") . Dies wird in den folgenden Beispielen verwendet. Sie können Elemente natürlich auch auf andere Weise erhalten. In der richtigen Situation können Sie stattdessen einfach this verwenden ins Detail geht dies nicht in den Rahmen 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 className-Attribut 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 zu einem Element zu entfernen, ohne andere potenzielle Klassen zu beeinflussen, ist ein einfacher Regex-Ersetzen 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 dieser Regex 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 Flag g weist das Ersetzen an, nach Bedarf zu wiederholen, falls der Klassenname mehrmals hinzugefügt wurde.

So prü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 zur Überprüfung verwendet werden, 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 von JavaScript-Interaktionslogik ein wartungsfähigerer Code erzielt.

Der erste Schritt dazu ist das Erstellen einer Funktion und das Aufrufen der Funktion im onclick-Attribut. Beispiel:

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

(Es ist nicht erforderlich, dass dieser Code in Skript-Tags enthalten ist. Dies ist lediglich der Kürze halber als Beispiel gedacht. Das Einschließen von JavaScript in eine andere Datei ist möglicherweise geeigneter.)

Der zweite Schritt besteht darin, das Onclick-Ereignis aus dem HTML-Code in JavaScript zu verschieben, beispielsweise mit 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 window.onload-Teil erforderlich ist, damit der Inhalt dieser Funktion ausgeführt wird, nachdem der HTML-Code vollständig geladen wurde. Andernfalls ist das MyElement möglicherweise nicht vorhanden, wenn der JavaScript-Code aufgerufen wird, sodass die Zeile fehlschlägt .)


JavaScript Frameworks und Bibliotheken

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

Während einige Leute es für übertrieben halten, ein ~ 50 KB-Framework für das einfache Ändern einer Klasse hinzuzufügen, ist die Überlegung, wenn Sie umfangreiche JavaScript-Arbeiten ausführen oder etwas, das ungewöhnliches Cross-Browser-Verhalten hat, eine Überlegung wert.

(In groben Zügen handelt es sich bei einer Bibliothek um eine Reihe von Werkzeugen, die für eine bestimmte Aufgabe entwickelt wurden, während ein Framework im Allgemeinen mehrere Bibliotheken enthält und eine Reihe von Aufgaben ausführt.)

Die obigen Beispiele wurden im Folgenden mit jQuery wiedergegeben, wahrscheinlich der am häufigsten verwendeten JavaScript-Bibliothek (obwohl es auch andere gibt, die es zu untersuchen gilt).

(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 sie nicht angewendet wird, oder zum Entfernen einer Klasse, die Folgendes ausführt:

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


Zuweisen einer Funktion zu einem Klickereignis mit jQuery:

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

oder, ohne eine ID zu benötigen:

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


3517
Peter Boughton

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 fügen Sie sie hinzu):

 document.getElementById ('id'). classList.toggle ('class'); 
394
Tyilo

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

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 Sie beispielsweise möchten, dass Onclick eine Klasse hinzufügt, kann die Schaltfläche folgendermaßen verwendet werden:

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

Sicherlich ist es jetzt besser, jQuery zu verwenden.

105
Andrew Orsich

Sie können node.className wie folgt verwenden:

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

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

70
Eric Wendelin

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

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

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

Das funktioniert für mich:

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

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

Sie können auch das HTMLElement-Objekt erweitern, um Methoden hinzuzufügen ( Gist ), die Klassen hinzufügen, entfernen, umschalten und prüfen:

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

18
moka

Um Informationen aus einem anderen beliebten Framework, Google Closures, hinzuzufügen, lesen Sie deren dom/classes class:

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

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

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

Eine Option zur Auswahl des Elements ist goog.dom.query mit einem CSS3-Selektor:

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

Ein paar kleinere Anmerkungen und Verbesserungen zu den vorherigen Regexen:

Sie sollten dies global tun, falls die Klassenliste mehrmals den Klassennamen hat. Wahrscheinlich möchten Sie Leerzeichen von den Enden der Klassenliste entfernen und mehrere Leerzeichen in ein Leerzeichen umwandeln, um keine Leerzeichen zu erhalten. Keines dieser Dinge sollte ein Problem darstellen, wenn der einzige Code, der mit den Klassennamen zu tun hat, die Regex unten verwendet und einen Namen entfernt, bevor er hinzugefügt wird. Aber. Nun, wer weiß, wer sich mit der Klassennamenliste beschäftigt.

Bei diesem Regex wird die Groß- und Kleinschreibung nicht beachtet, so dass Fehler in Klassennamen auftreten können, bevor der Code in einem Browser verwendet wird, der sich nicht um Groß- und Kleinschreibung in Klassennamen kümmert.

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

Ä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
12
Hiren Kansara

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 hängt clicked an das Klassenattribut des Elements an, wenn es nicht bereits Bestandteil des Elements ist, und entfernt es, wenn es vorhanden ist.

Ja, Sie müssen einen Verweis auf die jQuery-Bibliothek auf Ihrer Seite hinzufügen, um diesen Code verwenden zu können. Zumindest können Sie sich jedoch darauf verlassen, dass die meisten Funktionen in der Bibliothek auf fast allen modernen Browsern funktionieren und Sie Zeit sparen Ihren eigenen Code, um das gleiche zu tun.

Vielen Dank

11
shingokko

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

Hier ist meine Version, voll funktionsfähig:

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

Hier eine toggleClass, um eine Klasse in einem Element umzuschalten/hinzuzufügen/zu entfernen:

// 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 , um eine neue Klasse dynamisch zu erstellen

7
kofifus

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

Sie können versuchen, die Eigenschaft node attributes zu verwenden, um die Kompatibilität mit alten Browsern und sogar 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>

6
Eugene Tiurin

Ich benutze die folgenden Vanilla JavaScript-Funktionen in meinem Code. Sie verwenden reguläre Ausdrücke und indexOf, benötigen jedoch keine Sonderzeichen 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, "");
    }
}

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

5
Salman A

classList DOM API:

Eine sehr bequeme Methode zum Hinzufügen und Entfernen von Klassen ist die DOM-API classList. 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>

Im Protokoll können wir beobachten, dass wir ein Objekt nicht nur mit den Klassen des Elements, sondern auch mit vielen zusätzlichen Methoden und Eigenschaften zurückerhalten. Dieses Objekt erbt von der Schnittstelle DOMTokenList , einer Schnittstelle, die im DOM verwendet wird, um einen Satz 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>
  

0

OK, ich denke, in diesem Fall sollten Sie jQuery verwenden oder eigene Methoden in reinem Javascript schreiben. Meine Präferenz ist, meine eigenen Methoden hinzuzufügen, anstatt alle jQuery in meine Anwendung einzuspeisen, wenn ich dies aus anderen Gründen nicht brauche.

Ich möchte im Folgenden etwas zu den Methoden meines Javascript-Frameworks tun, um einige Funktionalitäten hinzuzufügen, die das Hinzufügen von Klassen, das Löschen von Klassen usw. betreffen. Ähnlich wie bei jQuery wird dies vollständig in IE9 + unterstützt. Außerdem ist mein Code in ES6 geschrieben Um sicherzustellen, dass Ihr Browser dies unterstützt oder Sie etwas wie babel verwenden, müssen Sie in Ihrem Code ansonsten ES5-Syntax verwenden. Auf diese Weise finden wir element über ID. Das 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 einfach wie unten aufgerufen verwenden. Stellen Sie sich vor, Ihr Element hat die ID von 'id' und die Klasse von 'class'. Stellen Sie sicher, dass Sie sie als String ü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');
0
Alireza

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

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>

0
Danish Khan

Ich dachte nur, ich würde das in werfen

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

sagen Sie einfach myElement.classList="new-class", sofern Sie keine anderen vorhandenen Klassen verwalten müssen. In diesem Fall können Sie die classList.add, .remove-Methoden 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>

0
Ron Royston

versuchen

function change(el) { el.className='second' }
.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }
<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>
0

DIE OPTIONEN.

Hier finden Sie einige Beispiele für Stil- und Klassenlisten, anhand derer Sie sehen können, welche Optionen Ihnen zur Verfügung stehen und wie Sie mit classList das tun, was Sie möchten.

style vs. classList

Der Unterschied zwischen style und classList besteht darin, dass Sie mit style die Stileigenschaften des Elements hinzufügen, aber classList steuert irgendwie die Klasse (n) des Elements (add, remove, toggle, contain) die add- und remove-Methode zu verwenden, da dies die beliebtesten sind.


Stilbeispiel

Wenn Sie einem Element die Eigenschaft margin-top 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

Angenommen, wir haben einen <div class="class-a class-b">, in diesem Fall haben wir unserem div-Element bereits 2 Klassen hinzugefügt, class-a und class-b, und wir möchten steuern, welche Klassen remove und welche Klasse add. Hier wird classList praktisch.

class-b entfernen

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

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

class-c hinzufügen

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

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


0
Farhad

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 wissen wollen, warum und sich etwas erziehen, dann schlage ich vor, die Antwort von Peter Boughton zu lesen.
https://stackoverflow.com/a/196038/1804013

Hinweis;
Dies ist mit (document oder event) möglich:

  • getElementById ()
  • getElementsByClassName ()
  • querySelector ()
  • querySelectorAll ()
0
tfont