類添加使用JavaScript

Question

例HTML一個DIV：

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

或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

可以使生活更輕鬆與一對夫婦的輔助功能：

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

Answer 4

檢查this添加類：

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

我覺得這是一個更好的解決方案。