Skip to content

Tags

On this page

JavaScript class 속성 변경하기 (class 추가/삭제)

수정하기
문서 생성 2021-10-04 13:49:34 최근 수정 2021-10-04 13:50:09
On this page

className

Element.className을 사용하면 특정 요소의 class 속성 값을 가져오거나 설정할 수 있다.

class 속성 값 가져오기

const cName = element.className; // 가져오기

class 값 설정하기

element.className = cName; // 설정

classList

Element.classList는 요소의 class 속성 정보를 담은 DOMTokenList를 반환한다. 유사 배열 객체이면서 이터러블이다.

class 추가하기

link.classList.add('foo'); // 클래스 추가하기
link.classList.add('foo', 'bar' 'baz'); // 여러 개 추가

class 삭제하기

link.classList.remove('foo'); // 클래스 제거하기
link.classList.remove('foo', 'bar' 'baz'); // 여러 개 제거

class 소유 여부 확인

link.classList.contains('foo'); // 클래스 소유 여부

class 교체하기

// replace(oldClassName, newClassName)
link.classList.replace('red', 'blue');

class toggle

// toggle(className[, force])
li.classList.toggle('foo');
// 해당 class가 있으면 삭제, 없으면 추가
// 두 번째 인수가 true면 첫 인수로 전달한 문자열을 추가, false면 제거

인덱스 값으로 가져오기

li.classList.item(0);

LINKS TO THIS PAGE