JavaScript에서 스타일 적용

클릭할 때마다 요소가 표시되었다가 사라지는 버튼을 만들어 봅시다. 기본적으로 요소는 숨겨져 있고(이는 display: none를 사용하여 구현하겠습니다), active 클래스를 추가하여 표시되도록 하겠습니다. classList.toggle을 사용하여 이 클래스를 추가하거나 제거하겠습니다:

html<button id="button">click me</button>
<div id="elem"></div>

css#elem {
  display: none;
  width: 200px;
  height: 200px;
  border: 1px solid green;
}
#elem.active {
  display: block;
}

javascriptlet button = document.querySelector('#button');
let elem = document.querySelector('#elem');

button.addEventListener('click', function() {
  elem.classList.toggle('active');
});

Результат: