w3.css

클래스 토글

JavaScript를 사용하여 요소에 클래스 이름을 추가하거나 알아보자.

클래스 전환

1단계) HTML 추가

id=”myDIV”인 div 요소에 클래스 이름을 추가할지 여부를 전환한다(이 예에서는 버튼을 사용하여 클래스 이름을 전환한다).

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

<div id="myDIV">
  This is a DIV element.
</div>

2단계) CSS 추가

토글할 클래스 이름을 추가한다.

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

3단계) ​​JavaScript 추가

id=”myDIV”를 갖는 <div> 요소를 가져와 “mystyle” 클래스 사이를 전환한다.

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기