使用 javascript 将类添加到 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11444640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a class to a DIV with javascript
提问by jay
Example HTML:
示例 HTML：
<div id="foo" class="class_one"></div>
How can I add the class class_twowithout replacing class_one?
如何在class_two不替换的情况下添加类class_one？
end result:
最终结果：
<div id="foo" class="class_one class_two"></div>
回答by Josh Mc
Standard javascript:
标准javascript：
document.getElementById('foo').className += ' class_two'
// Or see deekshith's answer below if you only need to support new browsers
or JQuery:
或 JQuery：
$('#foo').addClass('class_two');
回答by Lion
You may use jQuery.
您可以使用 jQuery。
$('#YourElement').addClass('YourClass'); //add
$('#YourElement').removeClass('YourClass'); //remove
$('#YourElement').toggleClass('YourClass'); //toggle
Or Javascript, if you wish.
或者 Javascript，如果你愿意的话。
document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove
回答by deekshith
A better way to add a class would be to use Element.classList.add():
添加类的更好方法是使用Element.classList.add()：
document.getElementById('foo').classList.add("class_two");
回答by RobG
You can make life easier with a couple of helper functions:
您可以使用几个辅助函数让生活更轻松：
function addClass(el, className) {
var classes = el.className.match(/\S+/g) || [];
if (!hasClass(el, className)) {
classes.push(className);
}
el.className = classes.join(' ');
}
function hasClass(el, className) {
var re = new RegExp('(^|\s+)' + className + '(\s+|$)');
return re.test(el.className);
}
addClass(document.getElementById('foo'), 'bar')
