일반 바닐라 JavaScript로 DOM 요소를 숨기고 표시하는 방법을 알아보세요.
JavaScript에는 style이라는 적절한 스타일 속성이 있습니다. , 요소에 CSS 속성을 설정하고 CSS로 스타일을 지정하는 데 사용할 수 있습니다. 시도해 봅시다!
JavaScript로 DOM 요소를 숨기는 방법은 다음과 같습니다.
element.style.display = "none"DOM 요소를 다시 표시하려면:
element.style.display = "block"
참고:DOM 요소가 원래 inline으로 설정된 경우 또는 inline-block , block을 바꾸면 됩니다. 위의 값 중 하나를 사용합니다.
실제 예
위의 예에서 element 그냥 일반적인 자리 표시자입니다. JavaScript의 style을 사용하려면 실용적인 의미에서 속성을 사용하려면 먼저 스타일을 지정할 DOM 요소를 선택해야 합니다.
DOM에서 제거하려는 cta-button 버튼이 있다고 가정해 보겠습니다. . 다음과 같이 하면 됩니다.
const ctaButton = document.querySelector(".cta-button")
ctaButton.style.display = "none"