使用javascript将类添加到DIV

HTML示例：

<div id="foo" class="class_one"></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

---

您可以使用两个辅助功能使生活更轻松：

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

---

添加类的更好方法是使用：

---

这很好，我以前从未见过，classList是一个新的api吗？/与旧浏览器兼容？我没有在所有浏览器上检查它们，但它们可以在主要（最新）浏览器上工作。classList在大多数现代浏览器上可用monhttp://caniuse.com/#feat=classlist

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

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