[JS] class 추가/변경/삭제/읽기 (className, classList)

박시은·2023년 12월 28일

목록 보기

56/58

▶ className

전체 클래스 문자열을 한번에 설정하거나 가져오려는 경우에 사용한다.

클래스 하나만 조작하고 싶을 때 사용하고 싶을 때 사용할 수 없다.

▷ 클래스 가져오기

<div id="myElement" class="test"></div>

function getClassName() {
  document.getElementById("myElement").className;
  alert(document.getElementById("myElement").className);
}
getClassName();

짜잔!🎇

▷ 클래스 이름 설정/변경

<div id="myElement" class="test"></div>

// 클래스 이름 설정/변경
function setClassName() {
  document.getElementById("myElement").className = "love";
  alert(document.getElementById("myElement").className);
}

setClassName();

짜잔!🎇

▷ 클래스 추가

⚠️ 클래스명 추가시에 기존에 가지고 있는 class명들을 전부 지우고 추가한다.

<div id="myElement" class="test"></div>

// 클래스 추가
function addClassName() {
  document.getElementById("myElement").className += " love";
  alert(document.getElementById("myElement").className);
}

addClassName();

짜잔!🎇

▶ classList

클래스를 개별적으로 조작하려는 경우에 사용한다.

add, remove, contains, toggle등의 함수를 사용할 수 있다.

▷ 메서드

메소드	설명	예시
add	class 추가	`element.classList.add('이름');`
remove	class 삭제	`element.classList.replace('이름');`
toggle	class가 있는 경우 삭제하고, 없는 경우엔 추가	`element.classList.toggle('이름');`
contains	class가 존재하는지 확인	`element.classList.contains('이름');`
replace	class 교체	`element.classList.replace('이름');`

사용 예시 (toggle) : 커서 깜빡이는 효과

<p id="dynamic">안녕!</p>

.display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: rgb(11, 20, 70);
  color: white;
}
#dynamic {
  position: relative;
  display: inline;
}
#dynamic::after {
  height: 100%;
  width: 4px;
  content: "";
  position: absolute;
  top: 0px;
  right: -19px;
  background-color: white;
}
#dynamic.active::after {
  display: none;
}

const dynamic = document.querySelector("#dynamic");
function blink() {
  dynamic.classList.toggle("active");
}
setInterval(blink, 500);

짜잔!🎇

사용 예시 (contains)

// 존재하면 true, 존재하지 않으면 false 반환
const myElement = document.getElementById("myElement");
const show = myElement.classList.contains("pink-background");
alert(show);