[DOM_Style] JS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속성, 상속O)

visibility 예제

 

<style>

#hz {

  margin: auto;

  width: 400px;

  height: 200px;

  background-color: yellow;

  border: 1px solid black;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<p>주의: 안 보여도 공간 차지</p>

 

<script>

function homzzang() {

  document.getElementById("hz").style.visibility = "hidden";

}

</script>

 

결과보기

visibility 정의 

 

요소 표시 여부 설정/반환. 

 

---

 

1.

visibility:hidden;
안 보이지만, 공간은 차지 함. 즉, 보이지는 않지만 만져지는 투명인간

 

display:none; 

안 보이면서, 공간도 안 차지.  즉, 몸둥이 조차 사라져 만질 수 없는 투명인간 

 

2.

기본값: visible

반환값: 요소내용 표시 여부 나타내는 visibility 속성의 속성값 문자열

CSS속성: visibility
CSS버전: CSS2

3.

모든 브라우저 지원. 

 

visibility 구문 

 

[접근]

object.style.visibility

 

[설정]

object.style.visibility = "visible|hidden|collapse|initial|inherit"

 

---

 

[속성값]

 

visible
눈에 보이게 함 (기본값)

 

hidden
눈에 안 보이게 함. 해당 요소의 크기 만큼 공간 차지

 

collapse
table 요소를 위한 값. width와 padding 값은 유지되나, height 값은 무시됨

※ 다른 요소에 사용된다면 “hidden” 효과와 동일

※ table의 행과 열을 안보이게 하지만, table 레이아웃에는 영향 안 미침..

  

inherit

부모 요소 속성을 상속