[JavaScript] 클래스 제어

[JavaScript] 클래스 제어

---

- 클래스 1개 추가

$('#element').addClass('class1');
element.classList.add('class1');

- 클래스 여러개 추가

$('#element').addClass('class1 class2');
element.classList.add('class1', 'class2');

- 클래스 1개 삭제

$('#element').removeClass('class1');
element.classList.remove('class1');

- 클래스 여러개 삭제

$('#element').removeClass('class1 class2');
element.classList.remove('class1', 'class2');

- 클래스 존재 여부 체크

- 반환값 : boolean(true, false)

$('#element').hasClass('class1');
element.classList.contains('class1');

- 클래스 여러개 존재 여부 체크

- 반환값 : boolean(true, false)

- 한 개라도 일치하지 않으면 false 반환

$('#element').hasClass('class1 class2');
element.classList.contains('class1', 'class2');

- 클래스 토클

- 첫번째 인자 (필수): 클래스 이름

- 두번째 인자 (선택사항): boolean : true 인 경우 클래스 추가 , false 인 경우 클래스 삭제

$('#element').toggleClass('class1');
$('#element').toggleClass('class1', true);
$('#element').toggleClass('class1', false);
element.classList.toggle('class1');
element.classList.toggle('class1', true);
element.classList.toggle('class1', false);