Element.className

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

개요

className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

문법

js
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
  • cName은 현재 요소의 클래스 혹은 공백으로 구분된 클래스들을 표현하는 문자열 변수이다.

예제

js
let elm = document.getElementById("item");

if (elm.className === "active") {
  elm.className = "inactive";
} else {
  elm.className = "active";
}

주의

많은 언어에서 DOM 조작을 위해 사용되는 "class " 키워드와의 혼란을 줄이기 위하여 class 대신 className이라는 프로퍼티 명을 사용한다.

명세

Specification
DOM
# ref-for-dom-element-classname①

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
className

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

살펴보기