HTML DOM Element className 속성

정의와 사용법

className 속성 설정 또는 요소의 class 속성 반환.

다른 참조:

Element classList 속성

Document getElementsByClassName() 메서드

HTML DOM Style 객체

예제

예제 1

요소의 class 속성 설정:

element.className = "myStyle";

직접 시험해 보세요

예제 2

"myDIV"의 class 속성 가져오기:

let value = document.getElementById("myDIV").className;

직접 시험해 보세요

예제 3

두 클래스 이름 사이에서 전환:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

직접 시험해 보세요

안내:하단 페이지에서 더 많은 예제를 제공합니다.

문법

className 속성 반환:

HTMLElementObject.className

className 속성 설정:

HTMLElementObject.className = class

속성 값

값 설명
class

요소의 클래스 이름입니다。

여러 클래스를 공백으로 구분하여 "test demo"와 같이 사용합니다。

반환 값

타입 설명
문자열 요소의 클래스 또는 공백으로 구분된 클래스 목록입니다。

더 많은 예제

예제 4

첫 번째 <div> 요소의 class 속성을 가져옵니다（만약 있으면）：

let value = document.getElementsByTagName("div")[0].className;

직접 시험해 보세요

예제 5

여러 클래스를 가진 class 속성을 가져옵니다：

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

직접 시험해 보세요

예제 6

기존 class 속성을 새 class 속성으로 덮어쓰세요：

element.className = "newClassName";

직접 시험해 보세요

예제 7

기존 값을 덮어쓰지 않고 새 클래스를 추가하려면 공백과 새 클래스를 추가하세요：

element.className += " class1 class2";

직접 시험해 보세요

예제 8

만약 "myDIV"에 "myStyle" 클래스가 있으면, 글꼴 크기를 변경합니다：

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

직접 시험해 보세요

예제 9

만약 페이지 상단에서 50 픽셀 스크롤되면 "test" 클래스가 추가됩니다：

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

직접 시험해 보세요

브라우저 지원

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

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

관련 페이지

CSS 교육:CSS 문법

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