使用javascript将类添加到DIV

Question

示例HTML:

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

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

最终结果:

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

Answer 1

标准javascript:

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

// Or see deekshith's answer below if you only need to support new browsers

或者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");