English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 객체

JavaScript 참조 가이드

JS DOM 참조 가이드

HTML DOM className 속성

HTML DOM Element 객체

className속성은 지정된 요소의 class 속성 값을 설정하거나 문자열로 반환합니다.

지정된 요소에 클래스 속성이 없거나 클래스 속성이 설정되지 않았다면 반환합니다:null문자열.

문법:

className 속성 반환:

element.className

className 속성 설정:

element.className = cName
document.getElementById("x").className = "para";
테스트 보기‹/›

브라우저 호환성

모든 브라우저에서 className 속성이 완전히 지원됩니다:

속성
className는는는는는

속성 값

값설명
cName현재 요소의 클래스나 공백으로 구분된 클래스를 나타내는 문자열 변수

기술 세부 사항

반환 값:요소의 클래스나 공백으로 구분된 클래스 목록을 나타내는 문자열
DOM 버전:DOM 등급1

더 많은 예제

첫 번째 <div> 요소의 클래스 이름을 반환합니다:

var x = document.getElementsByTagName("div")[0].className;
테스트 보기‹/›

기존 클래스 이름을 새 이름으로 덮어쓰세요:

<div class="myDiv">이것은 DIV 요소입니다</div>
script>
var x = document.getElementsByTagName("div")[0];
x.className = "anotherClass";
</script>
테스트 보기‹/›

기존 값을 덮어쓰지 않고 요소에 클래스를 추가하려면 공백과 새 클래스 이름을 삽입하세요:

<div class="myDiv">이것은 DIV 요소입니다</div>
script>
var x = document.getElementsByTagName("div")[0];
x.className　+= " anotherClass";
</script>
테스트 보기‹/›

<div> 요소가 "shadow" 클래스를 가지고 있는지 찾아보세요:

var x = document.getElementsByTagName("div")[0];
if (x.className.indexOf("shadow") !=　-1) {
　　　alert("Yes... The DIV has ' shadow' class");
}
　　　alert("False");
}
테스트 보기‹/›

관련 참조

CSS 가이드:CSS 선택기

CSS 참조:CSS #id선택기

CSS 참조: CSS .class 선택기

JavaScript 참조:문자 indexOf() 메서드

HTML DOM 참조:HTML DOM classList 속성

HTML DOM 참조:HTML DOM getElementsByClassName() 메서드

HTML DOM 참조:HTML DOM getElementById() 메서드

HTML DOM 참조:HTML DOM querySelector() 메서드

HTML DOM Element 객체

JavaScript History 객체HTML DOM Element 객체