JavaScript CSS如何向元素添加和删除多个CSS类

Question

如何在不使用任何库的情况下通过javascript将多个css类分配给html元素？

Answer 1

这是一个更简单的方法来添加多个类classList(由所有现代浏览器支持,如此处的其他答案中所述):

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

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

如果你有一个要添加到元素的类名数组,你可以使用ES6扩展运算符将它们全部传递到classList.add()这个单行:

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

请注意,并非所有浏览器本身都支持ES6,因此与任何其他ES6答案一样,您可能希望使用像Babel这样的转换程序,或者只是坚持使用ES5并使用类似@ LayZee的解决方案.

Answer 2

试试这个......

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

在这里得到...

Answer 3

这有效:

myElement.className = 'foo bar baz';

Answer 4

至少有几种不同的方式：

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

Answer 5

var el = document.getElementsByClassName('myclass')

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

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

要查找该类是否存在,请使用:

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

浏览器支持IE8 +

Answer 6

ADD的 2 种好方法：

但第一种方法更干净，因为第二种方法必须在开头添加一个空格。这是为了避免类名与前一个类连接在一起。

element.classList.add("d-flex", "align-items-center");
element.className += " d-flex align-items-center";

然后使用 classList 来删除，使用更干净的方式

element.classList.remove("d-grid", "bg-danger");

Answer 7

保证在新的浏览器上工作.旧的className方式可能不会,因为它已被弃用.

<element class="oneclass" />

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

Answer 8

您可以使用不同的内置方法以相同的方式添加和删除多个类：

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

Answer 9

因为我无法找到这个答案:

ES6方式(现代浏览器)

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