例HTML一个DIV:类添加使用JavaScript
<div id="foo" class="class_one"></div>
我怎样才能添加类class_two
无需更换class_one
?
最终结果是:
<div id="foo" class="class_one class_two"></div>
例HTML一个DIV:类添加使用JavaScript
<div id="foo" class="class_one"></div>
我怎样才能添加类class_two
无需更换class_one
?
最终结果是:
<div id="foo" class="class_one class_two"></div>
标准的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
这是相当整洁,我从来没有见过它,是classList一个新的API? /与旧版浏览器兼容? – 2012-07-12 03:46:26
我没有在所有浏览器上检查过它们,但它们可以在主要(最新)浏览器上运行。 – Lion 2012-07-12 03:49:32
classList可在大多数现代浏览器上使用monhttp://caniuse.com/#feat=classlist – 2016-04-06 19:34:19
可以使生活更轻松与一对夫妇的辅助功能:
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')
完美,谢谢队友。 – jared 2012-07-12 04:27:07