HTML DOM 요소 클래스 이름
❮ 요소 개체예시
요소에 대한 클래스 속성을 설정합니다.
element.className = "myStyle";
"myDIV"의 클래스 속성을 가져옵니다.
let value = document.getElementById("myDIV").className;
두 클래스 이름 간 전환:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
아래에 더 많은 예가 있습니다.
정의 및 사용
속성은 요소 의 className클래스 속성을 설정하거나 반환합니다.
통사론
className 속성을 반환합니다.
HTMLElementObject.className
className 속성을 설정합니다.
HTMLElementObject.className = class
속성 값
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
반환 값
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
더 많은 예
첫 번째 <div> 요소의 클래스 속성을 가져옵니다(있는 경우):
let value = document.getElementsByTagName("div")[0].className;
여러 클래스가 있는 클래스 속성 가져오기:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
기존 클래스 속성을 새 속성으로 덮어씁니다.
element.className = "newClassName";
기존 값을 덮어쓰지 않고 새 클래스를 추가하려면 공백과 새 클래스를 추가하십시오.
element.className += " class1 class2";
"myDIV"에 "myStyle" 클래스가 있는 경우 글꼴 크기를 변경합니다.
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
이 페이지 상단에서 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 모든 브라우저에서 지원됩니다:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ 요소 개체