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

Posted

技术标签:

【中文标题】JavaScript CSS 如何向一个元素添加和删除多个 CSS 类【英文标题】:JavaScript CSS how to add and remove multiple CSS classes to an element 【发布时间】:2010-12-31 14:30:29 【问题描述】:

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

【问题讨论】:

我从答案中看到这里有些混乱。您希望能够将多个类的常量集应用于一个元素,还是希望能够将更多类添加到它最初拥有的元素? 【参考方案1】:

这是通过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】:

尝试这样做...

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

知道了here...

【讨论】:

只需要用空格隔开每个类名即可:object.className = "class1 class2 class3 "【参考方案3】:

这行得通:

myElement.className = 'foo bar baz';

【讨论】:

这不好,因为如果你想保留它们,你会丢失已经存在的类。【参考方案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");

【讨论】:

提供示例很好,但如果您能解释哪些用例需要这些方式中的哪一种,那将会很有帮助。没有它,我们就会迷失在内陆。【参考方案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+

【讨论】:

【参考方案6】:

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

<element class="oneclass" />

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

【讨论】:

【参考方案7】:

因为我在任何地方都找不到这个答案:

ES6方式(现代浏览器)

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

【讨论】:

【参考方案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');

【讨论】:

【参考方案9】:

添加的两种好方法:

但第一种方式更简洁,因为第二种方式你必须在开头添加一个空格这是为了避免类名与上一个类结合。

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

然后REMOVE使用更简洁的方式,通过使用classList

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

【讨论】:

【参考方案10】:

也许:

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

未经测试,但应该可以工作。

【讨论】:

我认为这可能会删除元素上的其他类,如果有的话【参考方案11】:

就用这个

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

注意空间以避免旧类与新类混合

【讨论】:

【参考方案12】:

试试这个:

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

类似的逻辑可以用来制作一个 removeClass 函数。

【讨论】:

【参考方案13】:

在现代浏览器中,classList API 是 supported。

这允许像这样的(普通)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 上的资源:

Can I use MDN David Walsh HTML5 Doctor

【讨论】:

【参考方案14】:

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

在我的例子中,我正在上传一个图像文件并为其添加类,现在每次上传图像时它都会添加这些类,无论它们是否存在,

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

【讨论】:

【参考方案15】:

也许这会帮助你学习:

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

【讨论】:

【参考方案16】:
  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');

【讨论】:

【参考方案17】:

类列表添加

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;
&lt;div id="dynamic"&gt;dynamic css&lt;/div&gt;

【讨论】:

以上是关于JavaScript CSS 如何向一个元素添加和删除多个 CSS 类的主要内容,如果未能解决你的问题,请参考以下文章

如何用javascript为元素添加class

javascript:仅当父元素处于活动状态且子元素具有特定类时,如何向子元素添加属性?

如何使用 JavaScript 向 HTML 元素添加/更新属性?

css 当中如何实现一个元素的hover, focus 状态改变其他元素的样式

使用 JavaScript 向 JSON 对象添加新属性(元素)

jQuery CSS类