classList

kirin.log·2021년 1월 27일

classList

🚀 요소에서 css클래스를 추가, 제거, 전환하는데 유용하게 쓰인다.
🚀 위 속성은 읽기 전용이지만, add() 및 remove() 메서드를 사용하여 수정할 수 있다

🚩 add ➡ 1개 또는 여러개의 class 속성을 추가

document.getElementById("myDIV").classList.add("mystyle");
document.getElementById("myDIV").classList.add("mystyle", "anotherClass");
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

예시

<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV">
  	I am a DIV element
  </div>
<body>

<style>
.mystyle {
  width: 500px;
  height: 50px;
  padding: 15px;
  border: 1px solid black;
}

.anotherClass {
  background-color: coral;
  color: white;
}

.thirdClass {
  text-transform: uppercase;
  text-align: center;
  font-size: 25px;
}
</style>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
}
</script>

🚩 remove ➡ 1개 또는 여러개의 class 속성을 제거

document.getElementById("myDIV").classList.remove("mystyle");
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass");
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
// 기존 적용되어 있는 속성 중에서 빼기

예시

<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" class="mystyle">
  	I am a DIV element
  </div>
<body>

<style>
.mystyle {
  width: 500px;
  height: 50px;
  padding: 15px;
  border: 1px solid black;
}
</style>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.remove("mystyle");
}
</script>

🚩 toggle ➡ 두 class 클래스 간을 전환 제거

document.getElementById("myDIV").classList.toggle("newClassName");

예시

<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" class="mystyle">
  	I am a DIV element
  </div>
<body>

<style>
.mystyle {
  width: 300px;
  height: 50px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

.newClassName {
  width: 400px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  font-size: 25px;
  color: navy;
  margin-bottom: 10px;
}
</style>

<script>
function myFunction() {
  document.getElementById("myDIV").classList.toggle("newClassName");
}
</script>

🚗 classList 속성 및 메소드를 활용한 예시

👉 요소의 class 이름을 가져오기.

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

let x = document.getElementById("myDIV").classList;

👉 요소에 있는 class 이름 수 확인하기.

let x = document.getElementById("myDIV").classList.length;

👉 요소의 첫 번째 클래스 이름 (인덱스 0)을 가져오기.

let x = document.getElementById("myDIV").classList.item(0);

👉 요소에 "mystyle"클래스가 있는지 확인하기.

let x = document.getElementById("myDIV").classList.contains("mystyle");

👉 요소에 "mystyle"클래스가 있는지 알아보고, 있다면 다른 클래스 이름을 제거하하기

let x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
       x.classList.remove("anotherClass");
} else {
       alert("Could not find it.");
}

kirin.log

boma91@gmail.com

이전 포스트

State, Props, Event

다음 포스트

classList

classList

🚗 classList 속성 및 메소드를 활용한 예시

State, Props, Event

가상요소 ::before ::after

0개의 댓글