자바스크립트 classList 메소드

 

 

안녕하세요 :) 무택입니다🧔

오늘 알아볼 내용은 자바스크립트에서 많이 사용되는 classList 메소드에 대한 내용입니다. add, remove, toggle 등 활용 방법이 다양하고 비교적 간단하게 사용할 수 있어 자바스크립트 기능 중에 꼭 알아둬야 할 메소드인 것 같습니다.

 

목차

가. 코드

나. codepen 예제

다. classList 설명

 

 

코드

HTML

-

<ul>
    <li id="add">
        <h1>add테스트</h1>
        <button class="btn">add 활성화</button>
    </li>
    <li id="remove">
        <h1 class="pink">remove테스트</h1>
        <button class="btn">remove 활성화</button>
    </li>
    <li id="contains">
        <h1 class="pink">contains테스트</h1>
        <button class="btn">contains 활성화</button>
    </li>
    <li id="replace">
        <h1 class="pink">replace테스트</h1>
        <button class="btn">replace 활성화</button>
    </li>
    <li id="toggle">
        <h1>toggle테스트</h1>
        <button class="btn">toggle 활성화</button>
    </li>
</ul>

 

 

CSS

-

* {
    padding: 0;
    margin: 0;
    list-style: none;
}
li{
    margin-block: 20px;
}
.pink {
    color: pink;
}

.blue {
    color: blue;
}

 

 

JS

-

window.onload = function(){
    document.querySelector('#add>.btn').addEventListener('click', function () {
        document.querySelector('#add>h1').classList.add('pink');
    })
    document.querySelector('#remove>.btn').addEventListener('click', function () {
        document.querySelector('#remove>h1').classList.remove('pink');
    })
    document.querySelector('#contains>.btn').addEventListener('click', function () {
        let check = document.querySelector('#contains>h1').classList.contains('pink');
        if(check == true){
            document.querySelector('#contains>h1').innerHTML = "contains테스트는 .pink를 포함하고 있습니다.";
        }
    })
    document.querySelector('#replace>.btn').addEventListener('click', function () {
        document.querySelector('#replace>h1').classList.replace('pink','blue');
    })
    document.querySelector('#toggle>.btn').addEventListener('click', function () {
        document.querySelector('#toggle>h1').classList.toggle('pink');
    })
}

---

codepen 예제

-

See the Pen Untitled by TytanLee (@TytanLee) on CodePen.

 

---

classList 설명

element.classList.add(String)
-
element요소에 'String'을 추가, 같은 클래스명이 있는 경우에는 무시합니다.


element.classList.remove(String)
-
element요소에 'String'을 제거, 'String'이 없는 경우에는 무시합니다.


element.classList.toggle(String)
-
element요소에 'String'을 추가 및 제거 = 'String'이 없으면 추가, 'String'이 있으면 제거합니다.


element.classList.contains(String)
-
element요소에 'String'이 있으면 true 반환, 없으면 false 반환(boolean)


element.classList.replace(String1, String2)
-
element요소에 'String1'을 'String2'로 변경