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


75

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


1
Ich sehe an den Antworten, dass hier einige Verwirrung herrscht. Möchten Sie in der Lage sein, einen konstanten Satz mehrerer Klassen auf ein Element anzuwenden, oder möchten Sie in der Lage sein, einem ursprünglich vorhandenen Element weitere Klassen hinzuzufügen?
ProfK

Antworten:


72

Versuchen Sie das ...

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

Habe das hier ...


20
Sie müssen nur jeden Klassennamen durch ein Leerzeichen trennen: object.className ="class1 class2 class3 "
Roy Hinkley

89

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.


37

Das funktioniert:

myElement.className = 'foo bar baz';

4
Das ist nicht gut, weil Sie die Klassen verlieren, die bereits vorhanden sind, wenn Sie sie behalten möchten.
Herman Van Der Blom

14
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 +


14

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

Beispiele anzubieten ist gut, aber es wäre hilfreich, wenn Sie erklären könnten, welche Anwendungsfälle welche dieser Möglichkeiten erfordern. Ohne das sind wir einfach im Outback verloren.
Mentalist

8

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

8

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

7

Da ich diese Antwort nirgendwo finden konnte:

ES6 Weg (moderne Browser)

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

2

Vielleicht:

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

Nicht getestet, sollte aber funktionieren.


Ich denke, dies könnte die anderen Klassen auf dem Element entfernen, wenn es welche gibt
Marc Sloth Eastman

2

benutze dies einfach

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

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


1

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.


1

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:


1

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.


0

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>


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

0

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>

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.