자바 스크립트

Question

예 HTML과 DIV에 클래스를 추가

가 어떻게 class_one를 교체하지 않고 클래스 class_two을 추가 할 수 있습니다

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

?

최종 결과 :

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

Answer 1

표준 자바 스크립트 :

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 

---

또는 자바 스크립트, 원하는 경우.

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

나는 이것이 더 나은 솔루션입니다 생각합니다.