클래스 전환 방법

클래스 전환

제1단계 - HTML 추가:

클래스 이름을 추가할 때 id="myDIV" 의 div 요소 간을 전환합니다(이 예제에서는 버튼을 사용하여 클래스 이름을 전환합니다).

<button onclick="myFunction()">시도해보세요</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");
}

본인이 직접 시도해보세요

관련 페이지

교육:클래스 추가 방법

교육:클래스 제거 방법

참조 가이드:HTML DOM Element classList 속성