JavaScript-CSS zum Hinzufügen und Entfernen mehrerer CSS-Klassen zu einem Element

Wie kann man einem HTML-Element mehrere CSS-Klassen über Javascript zuweisen, ohne Bibliotheken zu verwenden?

Versuchen Sie das ...

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

Habe das hier ...

Hier ist eine einfachere Methode zum Hinzufügen mehrerer Klassen über classList(unterstützt von allen modernen Browsern, wie in anderen Antworten hier angegeben):

div.classList.add('foo', 'bar'); // add multiple classes

Von: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples

Wenn Sie ein Array von Klassennamen haben zu einem Element hinzuzufügen, können Sie die Verwendung ES6 Spread Betreiber zu sie alle in Pass classList.add()über diese Einzeiler:

let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);

Beachten Sie, dass noch nicht alle Browser ES6 nativ unterstützen. Wie bei jeder anderen ES6-Antwort möchten Sie wahrscheinlich einen Transpiler wie Babel verwenden oder einfach bei ES5 bleiben und eine Lösung wie die oben beschriebene von @ LayZee verwenden.

Das funktioniert:

myElement.className = 'foo bar baz';

var el = document.getElementsByClassName('myclass')

el[0].classList.add('newclass');

el[0].classList.remove('newclass');

Verwenden Sie Folgendes, um festzustellen, ob die Klasse vorhanden ist oder nicht.

el[0].classList.contains('newclass'); // this will return true or false 

Browser-Unterstützung IE8 +

Es gibt zumindest einige verschiedene Möglichkeiten:

var buttonTop = document.getElementById("buttonTop");

buttonTop.className = "myElement myButton myStyle";

buttonTop.className = "myElement";

buttonTop.className += " myButton myStyle";

buttonTop.classList.add("myElement");

buttonTop.classList.add("myButton", "myStyle");

buttonTop.setAttribute("class", "myElement");

buttonTop.setAttribute("class", buttonTop.getAttribute("class") + " myButton myStyle");

buttonTop.classList.remove("myElement", "myButton", "myStyle");

garantiert funktioniert auf neuen Browsern. Der alte className-Weg kann nicht, da es veraltet ist.

<element class="oneclass" />

element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another

Sie können mehrere Klassen auf dieselbe Weise mit verschiedenen integrierten Methoden hinzufügen und entfernen:

const myElem = document.getElementById('element-id');
//add multiple classes
myElem.classList.add('class-one', 'class-two', 'class-three');
//remove multiple classes
myElem.classList.remove('class-one', 'class-two', 'class-three');

Da ich diese Antwort nirgendwo finden konnte:

ES6 Weg (moderne Browser)

el.classList.add("foo", "bar", "baz");

Vielleicht:

document.getElementById("myEle").className = "class1 class2";

Nicht getestet, sollte aber funktionieren.

benutze dies einfach

element.getAttributeNode("class").value += " antherClass";

Pass auf den Raum auf, um zu vermeiden, dass alte Klasse mit neuer Klasse vermischt wird

Versuche dies:

function addClass(element, value) {
  if(!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

Eine ähnliche Logik könnte verwendet werden, um eine removeClass-Funktion zu erstellen.

In modernen Browsern, die classlist API wird unterstützt .

Dies ermöglicht eine (Vanille-) JavaScript-Funktion wie folgt:

var addClasses;

addClasses = function (selector, classArray) {
    'use strict';

    var className, element, elements, i, j, lengthI, lengthJ;

    elements = document.querySelectorAll(selector);

    // Loop through the elements
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) {
        element = elements[i];

        // Loop through the array of classes to add one class at a time
        for (j = 0, lengthJ = classArray.length; j < lengthJ; j += 1) {
            className = classArray[j];

            element.classList.add(className);
        }
    }
};

Moderne Browser (nicht IE) unterstützen die Übergabe mehrerer Argumente an die classList::addFunktion, wodurch die Notwendigkeit der verschachtelten Schleife entfällt und die Funktion ein wenig vereinfacht wird:

var addClasses;

addClasses = function (selector, classArray) {
    'use strict';

    var classList, className, element, elements, i, j, lengthI, lengthJ;

    elements = document.querySelectorAll(selector);

    // Loop through the elements
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) {
        element = elements[i];
        classList = element.classList;

        // Pass the array of classes as multiple arguments to classList::add
        classList.add.apply(classList, classArray);
    }
};

Verwendung

addClasses('.button', ['large', 'primary']);

Funktionsversion

var addClassesToElement, addClassesToSelection;

addClassesToElement = function (element, classArray) {
    'use strict';

    classArray.forEach(function (className) {
       element.classList.add(className);
    });
};

addClassesToSelection = function (selector, classArray) {
    'use strict';

    // Use Array::forEach on NodeList to iterate over results.
    // Okay, since we’re not trying to modify the NodeList.
    Array.prototype.forEach.call(document.querySelectorAll(selector), function (element) {
        addClassesToElement(element, classArray)
    });
};

// Usage
addClassesToSelection('.button', ['button', 'button--primary', 'button--large'])

Die classList::addFunktion verhindert im Gegensatz zu einigen der vorherigen Antworten, dass mehrere Instanzen derselben CSS-Klasse vorhanden sind.

Ressourcen in der classList-API:

• Kann ich benutzen
• MDN
• David Walsh
• HTML5 Doktor

Der Element.className += " MyClass"; Ansatz wird nicht empfohlen da diese Klassen immer hinzugefügt werden, unabhängig davon, ob sie beendet wurden oder nicht.

In meinem Fall habe ich eine Bilddatei hochgeladen und Klassen hinzugefügt. Jedes Mal, wenn Sie ein Bild hochladen, werden diese Klassen hinzugefügt, unabhängig davon, ob sie vorhanden sind oder nicht.

Der empfohlene Weg ist, dass auf Element.classList.add("class1" , "class2" , "class3"); diese Weise keine zusätzlichen Klassen hinzugefügt werden, wenn diese bereits vorhanden sind.

Vielleicht hilft Ihnen das beim Lernen:

//<![CDATA[
/* external.js */
var doc, bod, htm, C, E, addClassName, removeClassName; // for use onload elsewhere
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
addClassName = function(element, className){
  var rx = new RegExp('^(.+\s)*'+className+'(\s.+)*$');
  if(!element.className.match(rx)){
    element.className += ' '+className;
  }
  return element.className;
}
removeClassName = function(element, className){
  element.className = element.className.replace(new RegExp('\s?'+className), '');
  return element.className;
}
var out = E('output'), mn = doc.getElementsByClassName('main')[0];
out.innerHTML = addClassName(mn, 'wow');
out.innerHTML = addClassName(mn, 'cool');
out.innerHTML = addClassName(mn, 'it works');
out.innerHTML = removeClassName(mn, 'wow');
out.innerHTML = removeClassName(mn, 'main');

}); // close load
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='output'></div>
  </div>
</body>
</html>

  addClass(element, className1, className2){
    element.classList.add(className1, className2);
  }
  removeClass(element, className1, className2) {
    element.classList.remove(className1, className2);
  }

removeClass(myElement, 'myClass1', 'myClass2');
addClass(myElement, 'myClass1', 'myClass2');

ClassList hinzufügen

var dynamic=document.getElementById("dynamic");
dynamic.classList.add("red");
dynamic.classList.add("size");
dynamic.classList.add("bold");

.red{
color:red;
}
.size{
font-size:40px;
}
.bold{
font-weight:800;
}

<div id="dynamic">dynamic css</div>