使用javascript将类添加到DIV

Question

示例 HTML：

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

如何在不替换class_one class_two

最终结果：

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

Answer 1

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

标准的javascript：

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

或 JQuery：

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

Answer 2

你可以使用 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

Answer 3

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

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

Answer 4

您可以使用几个辅助函数让生活更轻松：

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