[CSS ] display 감추기, 보이기

Display 감추기, 보이기

 

 

  CSS, dsipaly 감추고 보이게 하기

 display의 기본은 다음과 같습니다.

//display의 기본값
<div style="display:block;"> </div>

//display 감추기
<div style="display:none;"> </div>

 

기본적으로 block와 none를 사용합니다.

block는 display의 가장 기본값이므로 display설정 안 할 경우, 자동적으로 주어지는 값입니다.

none는 display의 숨길 때 가장 대표적으로 사용하는 명령어로, 해당 영역을 숨길때 사용하게 됩니다.

 

이제 위의 명령어를 활용하여 javascript를 통해 변경하도록 하겠습니다.

 

 

  JavaScript에서 변경하기

<div id="cssTest" style="display:none;"> </div>

 만약 위에처럼 html에 해당 영역이 있다고 가정하였을 경우에 대해 살펴보겠습니다.

 

 

JavaScript에서 변경하기

//display 보이게 하기
document.getElementById("cssTest").style.display = 'block';

//display 감추기
document.getElementById("cssTest").style.display = 'none';

해당 div의 id가 지정되어 있을 경우 style.display의 명령어로 display의 value를 변경할 수 있습니다.

 

 

JQuery에서 변경하기

$('#cssTest').show();

$('#cssTest').hide();

해당 div의 id가 지정되어 있을 경우 show와 hide를 통해 display를 변경할 수 있습니다.

기본적으로 show는 block를 안내합니다.

 

 

 

  JavaScript에서 class 추가하기

단일

//class명 sidebar를 가진 테그를 상위에서 하나만 찾는다.
let sidebar = document.querySelector(".sidebar");

//class명 bx-menu를 가진 테그를 상위에서 하나만 찾는다.
let sidebarBtn = document.querySelector(".bx-menu");

//sidebarBtn이 클릭 될 경우.
sidebarBtn.addEventListener("click", ()=>{

	sidebar의 class에 close class를 추가, 삭제한다.
	sidebar.classList.toggle("close");
});

 

복수

//class명의 arrorw를 모두 찾는다.
 let arrow = document.querySelectorAll(".arrow");

//모든 class명이 arrow인 것을 배열처리 한다.
for(var i=0; i <arrow.length; i++) {

  //배열된 arrow 중에서 클릭된 메뉴만 class showMenu를 추가, 삭제 한다.
  arrow[i].addEventListener("click", (e)=>{
    let arrowParent = e.target.parentElement.parentElement;
    arrowParent.classList.toggle("showMenu");
  });
}

 여러 개의 공통된 메뉴를 열게 될 경우, 똑같은 css환경을 열게 될 경우 위처럼 응용할 수 있습니다.

 

이 외에도, css의 마우스 이벤트를 통해 css 변경이 가능하지만 생략하도록 하겠습니다.

 

 

 

  마무리

 이것을 이해한 이는 퍼블의 재미에 빠지게 될 것입니다.