HTML DOM classList 속성

<시간/>

HTML DOM classList 속성은 HTML 요소와 관련된 클래스 이름을 반환하는 데 사용됩니다. DOMTokenlist 형식으로 클래스 이름을 반환합니다. DOMTokenlist는 공백으로 구분된 토큰 집합일 뿐입니다. 이 속성은 요소의 CSS 클래스를 추가, 제거 또는 전환하는 데 유용합니다.

classList 속성은 읽기 전용 속성이지만 add() 및 remove() 메서드를 사용하여 요소의 클래스를 추가하거나 제거할 수 있습니다.

속성

다음은 classList의 속성입니다 -

속성	설명
길이	목록의 클래스 수를 반환합니다. 읽기 전용입니다.

방법

다음은 classList의 메소드입니다 -

메소드	설명
add(class1, class2, class3...)	요소에 하나 이상의 클래스 이름을 추가합니다. 주어진 클래스가 이미 존재하는 경우 추가되지 않습니다.
포함(클래스)	요소에 주어진 클래스 이름이 있는지 여부를 나타내는 부울 값을 반환합니다. True는 요소에 지정된 클래스 이름이 포함되어 있음을 의미하고 false는 요소에 클래스 이름이 포함되어 있지 않음을 의미합니다.
항목(색인)	요소에서 주어진 인덱스 번호를 가진 클래스 이름을 반환합니다. 인덱싱은 0에서 시작하고 인덱스가 범위를 벗어나면 null을 반환합니다.
제거(class1, class2 class3, ...)	요소에서 하나 이상의 클래스 이름을 제거합니다. remove에 지정된 클래스가 존재하지 않으면 오류가 발생하지 않습니다.
toggle(클래스, 참\|거짓)	요소의 클래스 이름 사이를 전환합니다. 첫 번째 매개변수는 존재하지 않는 요소에 클래스를 추가하고 true를 반환하는 반면, 클래스가 존재하면 단순히 요소에서 제거하고 false를 반환합니다. 두 번째 매개변수는 부울 값을 취하고 주어진 클래스를 강제하는 선택적 매개변수입니다. 추가 또는 제거됩니다. 이전에 존재했는지 여부는 중요하지 않습니다.

구문

다음은 classList 속성의 구문입니다 -

element.classList

예시

HTML DOM classList 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   .firstDiv {
      width: 200px;
      height: 200px;
      padding: 15px;
      border: 1px double blue;
      position:relative;
      top:10px;
   }
   .secondDiv {
      background-color: lightgreen;
      color: red;
   }
   .thirdDiv {
      text-transform: capitalize;
      text-align: center;
      font-size: 30px;
   }
</style>
</head>
<body>
<p>Click the below button to add class to the below div element</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1">
sample div
</div>
<script>
   function classAdd() {
      document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM classList 속성

ADD CLASS 버튼 클릭 시 -

HTML DOM classList 속성

위의 예에서 -

우리는 나중에 div에 추가할 div 요소와 세 개의 CSS 스타일 클래스를 만들었습니다. -

.firstDiv {
   width: 200px;
   height: 200px;
   padding: 15px;
   border: 1px double blue;
   position:relative;
   top:10px;
}
.secondDiv {
   background-color: lightgreen;
   color: red;
}
.thirdDiv {
   text-transform: capitalize;
   text-align: center;
   font-size: 30px;
}
<div id="DIV1">
sample div
</div>

그런 다음 클릭 시 classAdd() 메서드를 실행하는 ADD CLASS 버튼을 만들었습니다. −

<button onclick="classAdd()">ADD CLASS</button>

classAdd() 메서드는 "DIV1" ID가 연결된 요소를 가져옵니다. 이 경우에는

요소입니다. 그런 다음 classlist 속성과 add() 메서드를 사용하여 firstDiv, secondDiv 및 thirdDiv 클래스를

요소 -

에 추가합니다.

function classAdd() {
   document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}