바닐라 JavaScript만으로 DOM 요소 숨기고 표시하기

외부 라이브러리 없이 순수한 바닐라 JavaScript만으로 DOM 요소를 숨기고 다시 표시하는 방법을 알아보세요.

JavaScript에는 style이라는 속성이 있어서, 이를 통해 요소에 CSS 속성을 설정하고 마치 CSS를 작성하듯 스타일을 지정할 수 있습니다. 지금 바로 직접 사용해 보겠습니다.

JavaScript로 DOM 요소를 숨기는 방법은 다음과 같습니다:

element.style.display = "none"

숨겼던 요소를 다시 화면에 표시하려면 아래처럼 작성합니다:

element.style.display = "block"

참고: 해당 DOM 요소가 원래 inline 또는 inline-block으로 설정되어 있었다면, 위 코드에서 block 값을 해당 값으로 바꿔주기만 하면 됩니다.

실전 예제

앞선 예제에서 element는 단순히 임시로 사용된 자리표시자(placeholder)일 뿐입니다. 실무에서 JavaScript의 style 속성을 활용하려면 먼저 스타일을 적용할 대상 DOM 요소를 선택해야 합니다.

예를 들어, DOM에서 숨기고 싶은 cta-button이라는 클래스를 가진 버튼이 있다면 다음과 같이 처리할 수 있습니다:

const ctaButton = document.querySelector(".cta-button")

ctaButton.style.display = "none"

document.querySelector()로 버튼 요소를 선택한 뒤, style.display 속성에 "none"을 할당하면 해당 요소가 화면에서 사라집니다. 반대로 다시 보여주고 싶다면 "block"(또는 요소의 원래 display 값)을 할당하면 됩니다.