JavaScript에서 HTML 요소를 숨기려면 visibility 속성을 활용하면 됩니다. 이 속성값을 hidden으로 설정하면 해당 요소가 화면에서 사라지고, visible로 되돌리면 다시 나타납니다. 아래 예제 코드를 직접 실행하면서 동작 방식을 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<body>
<p id = "pid">Demo Text</p>
<button type = "button" onclick = "displayHide()">숨기기</button>
<button type = "button" onclick = "displayShow()">보이기</button>
<script>
function displayHide() {
document.getElementById("pid").style.visibility = "hidden";
}
function displayShow() {
document.getElementById("pid").style.visibility = "visible";
}
</script>
</body>
</html>위 예제는 'Demo Text'라는 문단과 두 개의 버튼으로 구성되어 있습니다. 숨기기 버튼을 클릭하면 displayHide() 함수가 실행되어 해당 문단의 visibility 값이 hidden으로 바뀌면서 화면에서 사라집니다. 반대로 보이기 버튼을 클릭하면 displayShow() 함수가 값을 다시 visible로 설정하여 요소가 나타납니다.
참고: display:none과의 차이점
visibility: hidden의 가장 큰 특징은 요소를 숨겨도 원래 차지하던 공간이 그대로 유지된다는 점입니다. 반면 display: none을 사용하면 요소가 공간까지 완전히 제거되어 주변 레이아웃이 재배치됩니다. 따라서 페이지 전체 레이아웃을 유지한 채 특정 요소만 잠시 감추고 싶다면 visibility 속성을 사용하는 것이 좋습니다.