[JS] className / classList 메서드

📌 className

: 요소의 클래 값을 읽거나 쓸 수 있는 프로퍼티

• 클래스 이름을 문자열로 직접 조작
• 기존 클래스 이름을 새 문자열로 덮어쓰기 가능 
• 클래스 전체를 문자열 형태로 반환
• 클래스 전체를 관리

// HTML
<p id="myElement" class="highlight bold">Hello, world!</p>
<button onclick="changeClassName()">Change Class Name</button>

function changeClassName() {
    const element = document.getElementById('myElement');
    element.className = 'new-class another-class'; 
    // 기존 클래스가 모두 제거되고 새로운 클래스만 적용
}

 

 

---

📌 classList

: 요소의 클래스를 조작하는데 사용

• 요소의 클래스 목록에 접근
  
• 클래스 리스트를 배열처럼 다룰 수 있다
• 개별 class를 관리
  
  DOM 조작

 

 

 

 

✅ add()

: 지정한 클래스 값을 추가

• 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
• 여러 클래스, 배열 처리 가능 

const div = document.createElement("div");
div.className = "foo";

div.classList.add("anotherclass");

// 여러 클래스 처리
div.classList.add("foo", "bar", "baz"); 

// 배열 처리
const cls = ["foo", "bar"];
div.classList.add(...cls);

 

 

 

 

✅ remove()

: 지정한 클래스 값을 제거

• 없는 클래스를 제거해도 에러가 발생하지 않는다. 
• 여러 클래스, 배열 처리 가능 

const div = document.createElement("div");
div.className = "foo";

div.classList.remove("foo");

// 여러 클래스 처리
div.classList.remove("foo", "bar", "baz"); 

// 배열 처리
const cls = ["foo", "bar"];
div.classList.remove(...cls);

 

 

 

 

✅ contains()

: 해당 클래스가 요소의 class 속성에 존재하는지 확인

// HTML
<div class="anotherclass visible"></div>

console.log(div.classList.contains("foo")); // false
console.log(div.classList.contains("visible")); // true

 

 

 

 

✅ replace(old, new)

: 존재하는 클래스를 새로운 클래스로 교체

// HTML
<p id="myElement" class="old-class">Hello!</p>
<button onclick="replaceClass()">Replace Class</button>


function replaceClass() {
    const element = document.getElementById('myElement');
    element.classList.replace('old-class', 'new-class');
}

 

 

 

 

✅ item(index)

: 해당 index의 클래스 반환

// HTML
<p id="myElement" class="first  // second third"> Hello! </p>
<button onclick="getClassItem()"> Get Class Item </button>


function getClassItem() {
    const element = document.getElementById('myElement');
    
    const className = element.classList.item(1); // 두 번째 클래스(index: 1)
    alert(className); // second
}

 

 

 

 

✅ toggle()

: 클래스가 존재하면 제거, 존재하지 않으면 추가

// HTML
<p id="myElement" class="active">Hello!</p>
<button onclick="toggleClass()">Toggle Class</button>


function toggleClass() {
    const element = document.getElementById('myElement');
    
    element.classList.toggle('active'); // 'active' 클래스가 있으면 제거하고, 없으면 추가
}

 

 

---

 

Element.classList - Web API | MDN

 

Element.className - Web API | MDN

 

스타일과 클래스