예
A의 클래스를 설정 <div> ID = "myDIV"와 요소 :
document.getElementById("myDIV").className = "mystyle"; »그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
클래스 이름의 속성 집합 또는 요소 (요소의 클래스 속성의 값)의 클래스 이름을 반환합니다.
팁 : 클래스 이름에 유사한 속성이있다 classList 속성입니다.
브라우저 지원
| 재산 | |||||
|---|---|---|---|---|---|
| className | 예 | 예 | 예 | 예 | 예 |
통사론
클래스 이름 속성을 반환합니다 :
HTMLElementObject .className클래스 이름 속성을 설정 :
HTMLElementObject .className= class 속성 값
| 값 | 기술 |
|---|---|
| class | 요소의 클래스 이름을 지정합니다. 같은 공백으로 구분, 여러 클래스를 적용하려면 "test demo" |
기술적 세부 사항
| 반환 값 : | 요소의 클래스 또는 클래스들의 공간 분리 된 목록을 나타내는 문자열 |
|---|
더 예
예
최초의 클래스 이름 가져 오기 <div> 문서의 요소 (if any) :
var x = document.getElementsByTagName("DIV")[0].className; X의 결과는 다음과 같습니다
mystyle »그것을 자신을 시도 예
요소의 클래스 이름을하는 방법에 대한 다른 예 :
var x = document.getElementsByClassName("mystyle")[0].className;
var y =
document.getElementById("myDIV").className; »그것을 자신을 시도 예
여러 클래스와 요소의 클래스 이름을 가져 오기 :
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
var x = document.getElementById("myDIV").className;X의 결과는 다음과 같습니다
mystyle text example »그것을 자신을 시도 예
새와 함께 기존의 클래스 이름을 덮어 쓰기 :
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName"; »그것을 자신을 시도 예
공백과 새로운 클래스 이름을 삽입, 기존 값을 덮어 쓰지 않고, 요소에 클래스를 추가하려면 :
document.getElementById("myDIV").className += " anotherClass"; »그것을 자신을 시도 예
의 클래스가 있다면 "mystyle" ID = "myDIV"인 요소에 자사의 글꼴 크기를 변경 :
var x = document.getElementById("myDIV");
if (x.className ===
"mystyle") {
x.style.fontSize = "30px";
} »그것을 자신을 시도 예
상단에서 아래로 50 개 픽셀 사용자 스크롤 클래스 이름 - 다른 스크롤 위치에서 클래스 이름 간 전환 "test" 요소에 추가 될 것이다 (and removed when scrolled up again) .
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
}
else {
document.getElementById("myP").className
= "";
}
}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 선택기
CSS 참조 : CSS의 .class 선택기
HTML DOM 참조 : HTML DOM classList Property
HTML DOM 참조 : HTML DOM getElementsByClassName() 메소드
HTML DOM 참조 : HTML DOM 스타일 개체
<요소 개체