선택 과목

강의 추천:

정의 및 사용법 HTML DOM Element classList 속성

정의 및 사용법 속성은 요소의 CSS 클래스 이름을 반환합니다.

classList

속성은 DOMTokenList를 반환합니다.

인스턴스

const list = element.classList;
예제 1

직접 시험해 보세요

"myStyle" 클래스를 요소에 추가합니다:

예제 2

const list = element.classList;
"myStyle" 클래스를 요소에서 제거합니다:

직접 시험해 보세요

예제 3

"myStyle"의 열림/닫힘을 전환합니다:

const list = element.classList;
list.toggle("myStyle");

직접 시험해 보세요

추천:페이지 하단에 더 많은 예제가 제공됩니다.

문법

element.classList

반환 값

타입 설명
객체 DOMTokenList. 요소의 클래스 이름 리스트.

주의사항:classList 속성은 읽기 전용입니다만, 아래에 나열된 메서드를 사용하여 리스트에 추가, 전환 또는 제거할 수 있습니다:

classList 속성 및 메서드

이름 설명
add() 한 개나 많이 토큰을 리스트에 추가합니다.
contains() 리스트에 클래스가 포함되어 있으면 true를 반환합니다.
entries() 리스트에서 키/값 쌍을 가진 이터레이터를 반환합니다.
forEach() 리스트의 각 토큰에 대해 콜백 함수를 수행합니다。
item() 지정된 인덱스에 있는 토큰을 반환합니다。
keys() 리스트에 있는 키를 포함한 이터레이터를 반환합니다。
length 리스트에 있는 토큰 수를 반환합니다。
remove() 리스트에서 하나나 여러 개의 토큰을 제거합니다。
replace() 리스트에서 토큰을 대체합니다。
supports() 토큰이 속성이 지원하는 토큰 중 하나라면 true를 반환합니다。
toggle() 리스트에서 토큰 간을 전환합니다。
value 토큰 목록을 문자열 형태로 반환합니다。
values() 리스트에 있는 값들의 이터레이터를 반환합니다。

더 많은 예제

예제 4

요소에 여러 개의 클래스를 추가합니다：

element.classList.add("myStyle", "anotherClass", "thirdClass");

직접 시험해 보세요

예제 5

요소에서 여러 개의 클래스를 제거합니다：

element.classList.remove("myStyle", "anotherClass", "thirdClass");

직접 시험해 보세요

예제 6

요소에 몇 개의 클래스 이름이 있는가요：

let numb = element.classList.length;

직접 시험해 보세요

예제 7

"myDIV" 요소의 클래스 이름을 가져옵니다：

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

직접 시험해 보세요

예제 8

요소의 첫 번째 클래스를 가져옵니다：

let className = element.classList.item(0);

직접 시험해 보세요

예제 9

요소에 "myStyle" 클래스가 있는가요？

let x = element.classList.contains("myStyle");

직접 시험해 보세요

예제 10

요소가 "myStyle" 클래스를 가지고 있다면 "anotherClass"을 제거합니다：

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

직접 시험해 보세요

예제 11

줄 간격을 바꾸어 드롭다운 버튼을 만듭니다：

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

직접 시험해 보세요

예제 12

粘性 네비게이션 바를 만들기:

// 네비게이션 바를 가져옵니다
const navbar = document.getElementById("navbar");
// 네비게이션 바의 오프셋 위치를 가져옵니다
const sticky = navbar.offsetTop;
// 그 위치에 도착하면 sticky 클래스를 네비게이션 바에 추가합니다
// 스크롤 위치를 떠나면 그것을 제거합니다
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

직접 시험해 보세요

브라우저 지원

모든 브라우저가 지원합니다 element.classList：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

CSS 강의:CSS 문법

CSS 참조 매뉴얼:CSS .class 선택자

DOMTokenList 객체

className 속성

getElementsByClassName() 메서드

HTML DOM Style 객체