자바스크립트 항목 표시, 비표시 방법 예제

문자열이나 사진을 자바스크립트를 사용해 표시하거나 숨기는 방법을 알아보겠습니다.

우선 표시 또는 비표시를 하는 방법은 2가지가 있습니다.

• display
• visibility

2개의 설정 방법의 사용법과 차이점을 확인해 보겠습니다.

display

우선 display로 표시, 비표시 하는 샘플을 보겠습니다.

<div id="disp">display 표시/비표시 테스트 문자</div>

<form>
<input type="button" value="표시" onclick="disControll(0)">
<input type="button" value="비표시" onclick="disControll(1)">
</form>

<script>

function disControll(num)
{
  if (num == 0)
  {
    document.getElementById("disp").style.display="block";
  }
  else
  {
    document.getElementById("disp").style.display="none";
  }
}

</script>

div 태그에 id 속성을 지정했습니다.

id는 disp로 설정했습니다.

표시, 비표시를 위해 2개 버튼을 만들었습니다.

2개 버튼에는 onclick 이벤트를 설정했으며, 버튼을 클릭하면 disControll() 스크립트 함수를 호출하도록 했습니다.

표시 버튼에서 클릭을 했을 경우에는 disControll 함수에 파라미터 0을 전달하며, 비표시 버튼을 클릭하면 1을 전달합니다.

disControll 함수에서는 전달받은 파라미터를 확인해 표시 버튼을 클릭했는지, 비표시 클릭 버튼을 클릭했는지 판단합니다.

표시 버튼을 클릭한 경우에는 style.display=”block”을 사용해 화면에 표시합니다.

비표시 버튼을 클릭한 경우에는 style.display=”none”을 사용해 화면에 표시하지 않습니다.

display를 사용해 비표시를 하는 경우에는 div 태그 공간이 사라지게 됩니다.

표시되었는 문자가 없어지면서, 문자가 있었던 공간도 없어지게 됩니다.

visibility

이번에는 visibility를 사용해 표시, 비표시를 하는 샘플을 보겠습니다.

<div id="visi">display 표시/비표시 테스트 문자</div>

<form>
<input type="button" value="표시" onclick="visiControll(0)">
<input type="button" value="비표시" onclick="visiControll(1)">
</form>

<script>

function visiControll(num)
{
  if (num == 0)
  {
    document.getElementById("visi").style.visibility="visible";
  }
  else
  {
    document.getElementById("visi").style.visibility="hidden";
  }
}

</script>

기본적인 스크립트 작동방식은 display와 같습니다.

visibility를 사용해 표시를 하는 경우에는 style.visibility=”visible”을 사용합니다.

비표시를 하고 싶은 경우에는 style.visibility=”hidden”을 사용합니다.

visibility를 사용해 비표시를 한 경우에는 문자열만 지워졌습니다.

div 태그 공간은 그대로 남아있습니다.

display와 visibility의 차이점은 다음과 같습니다.

display를 사용해 표시 비표시를 하는 경우에는 block과 none을 설정.
visibility를 사용해 표시 비표시를 하는 경우에는 visible과 hidden을 설정.
display를 사용할 경우 빈 공간 영역이 사라지지만, visibility는 공간 영역이 사라지지 않음.

display와 visibility를 사용해 자바스크립트에서 표시, 비표시를 하는 방법을 알아봤습니다.