[Javascript] 버튼 클릭 시, div 보이기 숨기기

 

버튼을 클릭했을 때,

Javascript를 이용하여

div 영역을 보여주거나 숨기는 예제입니다.

 

 

1. display

<div id='my-div'></div>
<button onclick='btnClick()'>
  클릭하세요 
</button>

#my-div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

function btnClick() {
  const mydiv = document.getElementById('my-div');
  
  if(mydiv.style.display === 'none') {
    mydiv.style.display = 'block';
  }else {
    mydiv.style.display = 'none';
  }
}

  HTML  

<button onclick='btnClick()'>

버튼 클릭 시, 호출할 함수를 연결합니다.

 

  JAVASCRIPT  

document.getElementById('my-div');

보이기, 숨기기 할 div를 선택합니다.

 

mydiv.style.display = 'block';

mydiv.style.display = 'none';

선택한 div의 style 항목 중, display 항목의 값을 'block', 'none'으로 번갈아가면서 설정합니다.

display 항목의 값을 none으로 설정하면,

div가 화면에서 사라지고, div가 원래 화면에서 차지하던 영역도 사라집니다.

따라서, div가 사라질 때, 그 아래에 있던 버튼이 위로 올라갑니다.

 

 

 

2. visibility

<div id='my-div'></div>
<button onclick='btnClick()'>
  클릭하세요 
</button>

#my-div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

function btnClick() {
  const mydiv = document.getElementById('my-div');
  
  if(mydiv.style.visibility === 'hidden') {
    mydiv.style.visibility = 'visible';
  }else {
    mydiv.style.visibility = 'hidden';
  }
}

 

mydiv.style.visibility = 'visible';

mydiv.style.visibility = 'hidden';

visibility  항목을 설정하면,

화면에서 div 영역은 그대로 유지하고, 보이지만 않도록 할 수 있습니다.