使用javascript将类添加到DIV中

Add a class to a DIV with javascript

本文关键字：DIV 添加 javascript 使用      更新时间：2023-09-26

示例HTML:

<div id="foo" class="class_one"></div>

如何在不替换class_one的情况下添加类class_two？

最终结果：

<div id="foo" class="class_one class_two"></div>

如果您只需要支持新的浏览器，请参阅下面的deekshith的答案

标准javascript:

document.getElementById('foo').className += ' class_two'

或JQuery:

$('#foo').addClass('class_two');

您可以使用jQuery。

$('#YourElement').addClass('YourClass'); //add
$('#YourElement').removeClass('YourClass'); //remove
$('#YourElement').toggleClass('YourClass'); //toggle

或者Javascript，如果你愿意的话。

document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove

添加类的更好方法是使用Element.classList.add（）：

document.getElementById('foo').classList.add("class_two");

您可以使用以下几个辅助函数来简化生活：

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')
相关文章：