![](/img/trans.png)
[英]how to add multiple css classes to a html element usin javascript
[英]JavaScript CSS how to add and remove multiple CSS classes to an element
如何在不使用任何库的情况下通过 javascript 将多个 css 类分配给一个 html 元素?
这是通过classList
添加多个类的更简单方法(所有现代浏览器都支持,如此处的其他答案所述):
div.classList.add('foo', 'bar'); // add multiple classes
来自: https : //developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples
如果你有一个类名数组要添加到一个元素中,你可以使用ES6 扩展运算符通过这个classList.add()
将它们全部传递到classList.add()
:
let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);
请注意,并非所有的浏览器都支持ES6本身还,所以与任何其他ES6答案你可能需要使用像transpiler巴别塔,或者只是坚持ES5和使用像@ LayZee的上述解决方案。
这有效:
myElement.className = 'foo bar baz';
至少有几种不同的方式:
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");
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+
保证在新的浏览器上工作。 旧的 className 方式可能不会,因为它已被弃用。
<element class="oneclass" />
element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another
由于我无法在任何地方找到这个答案:
ES6 方式(现代浏览器)
el.classList.add("foo", "bar", "baz");
您可以使用不同的内置方法以相同的方式添加和删除多个类:
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');
就用这个
element.getAttributeNode("class").value += " antherClass";
注意空间避免将旧类与新类混合
也许:
document.getElementById("myEle").className = "class1 class2";
未经测试,但应该可以工作。
2种伟大的方式来添加:
但是第一种方法更简洁,因为对于第二种方法,您必须在开头添加一个空格。 这是为了避免类名与前一个类连接。
element.classList.add("d-flex", "align-items-center");
element.className += " d-flex align-items-center";
然后使用更干净的方式移除,通过使用 classList
element.classList.remove("d-grid", "bg-danger");
尝试这个:
function addClass(element, value) {
if(!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
类似的逻辑可用于创建 removeClass 函数。
在现代浏览器中, 支持classList API 。
这允许像这样的(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 上的资源:
Element.className += " MyClass";
不是推荐的方法,因为无论它们是否退出,它都会始终添加这些类。
就我而言,我正在上传一个图像文件并向其中添加类,现在每次上传图像时,它都会添加这些类,无论它们是否存在,
推荐的方式是Element.classList.add("class1" , "class2" , "class3");
如果它们已经存在,这种方式不会添加额外的类。
也许这会帮助你学习:
//<![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');
类列表添加
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.