[JavaScript] html 요소 보이기 / 숨기기

Javascript or jquery를 이용해 html 요소를 숨기거나 보이게 할 수 있습니다.

 

4가지 방법을 알아보겠습니다.

 

---

1. javascript를 이용한 display 변경

document.getElementById("sampleDiv").style.display ='none';		

document.getElementById("sampleDiv").style.display ='block';

이 경우로 숨김/ 보이기를 할 경우, 이전에 지정했던 Style 요소들이 사라짐 (해당 공간들이 사라짐)

 

 

2. jquery를 이용한 display 변경

$("#sampleDiv").css("display" ,"none");

$("#sampleDiv").css("display" ,"block");

 

 

 

3. jquery를 이용한 show/hide 

$("#sampleDiv").show();

$("#sampleDiv").hide();

1번과 다르게 style이 유지

 

 

 

4. javascript를 이용한 visibility 변경

document.getElementById("sampleDiv").style.visibility ='visible';		

document.getElementById("sampleDiv").style.visibility ='hidden';

이 방법을 사용하는 경우, 안에 있는 요소들이 보이지않지만 그 요소들이 할당 하고 있는 공간은 그대로 유지(공백처리)