[英]Add a class to a DIV with javascript
示例 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')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.