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

时间：2010-01-01 12:53:13

标签： javascript html css class append

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

17 个答案:

答案 0 :(得分：46)

尝试这样做...... 

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

得到这个here ...

答案 1 :(得分：40)

这是一种通过classList添加多个类的简单方法（所有现代浏览器都支持，如此处其他答案所述）：

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

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

如果你有一个要添加到元素的类名数组，你可以使用ES6 spread operator通过这个单行将它们全部传递到classList.add()：

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

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

答案 2 :(得分：27)

这有效：

myElement.className = 'foo bar baz';

答案 3 :(得分：12)

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 +

答案 4 :(得分：8)

保证可以在新浏览器上运行。旧的className方式可能没有，因为它已被弃用。

<element class="oneclass" />

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

答案 5 :(得分：5)

由于我无法在任何地方找到此答案，

ES6方法（现代浏览器）

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

答案 6 :(得分：2)

也许：

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

未经测试，但应该可以使用。

答案 7 :(得分：2)

只需使用此

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

注意Space以避免将旧类与新类混合

答案 8 :(得分：2)

两种添加的好方法：

但第一种方法更简洁，因为对于第二种方法，您必须在开头添加一个空格。 这是为了避免类名与之前的类连接。

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

然后REMOVE使用更干净的方式，通过使用classList

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

答案 9 :(得分：1)

试试这个：

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

可以使用类似的逻辑来创建removeClass函数。

答案 10 :(得分：1)

在现代浏览器中，classList API为supported。

这允许像这样的（vanilla）JavaScript函数：

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

现代浏览器（不是IE）支持将多个参数传递给classList::add函数，这样就不需要嵌套循环了，简化了函数：

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

<强>用法 

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

功能版 

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

classList::add函数将阻止同一CSS类的多个实例，而不是先前的一些答案。

classList API上的资源：

答案 11 :(得分：1)

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

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

答案 12 :(得分：1)

Element.className += " MyClass"; 不推荐的方法，因为无论是否退出，它都会添加这些类。

就我而言，我上传了一个图像文件并向其中添加了类，现在每次上传图像时，它都会添加这些类，无论它们是否存在，

推荐的方式是 Element.classList.add("class1" , "class2" , "class3"); 如果它们已经存在，这种方式不会添加额外的类。

答案 13 :(得分：0)

也许这会帮助你学习：

//<![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>

答案 14 :(得分：0)

至少有几种不同的方式：

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

答案 15 :(得分：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');

答案 16 :(得分：0)

ClassList 添加 

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>

相关问题
最新问题