개체나 layer 개체의 내용이 디스플레이될 것인가를 반환하거나 설정한다.

NS : layer.visibility[='value']
인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 내용이 모체 용기 범위을 벋어나면 단어를 잘라 다음 줄에 표시할 것인가를 나타내는 문자열이다.

inherit IE NS 디폴트이며, 다음 모체 개체의 속성로부터 상속받는디.
hidden IE 개체가 감춰진다.
hide NS 감춘다.
show NS 보인다.
visible IE 개체가 보인다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 inherit이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

display:none과는 달리, 보이지 않는 개체도 내용의 배치에서 보일 때와 마찬가지로 계속 같은 물리적 공간을 갖는다. 필요에따라 스크립트로 작동시켜 개체를 보이게하거나 감추게 할 수 있다.

IE5에서, 모체가 hidden일 때도 자식개체가 visible이 될 수 있다. IE4.0에서는 자식개체가 visible이 되려면 모체가 visible이어야 했다.

적용
개체scriptCSS IE 버전
참조

이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.



간단한 Explorer visibility 속성 예제

마우스를 올려보라.
<STYLE>
.visO { visibility:visible}
.visX { visibility:hidden}
</STYLE>
<IMG id="imgObj" src="../../gif/rfproperty.gif">
<DIV onMouseOver="imgObj.className='visX'"
   onMouseOut="imgObj.className='visO'">마우스를 올려보라.</DIV>

className과 인라인 스타일 두가지 방식으로 서로 상대 이미지의 visibility 속성값을 변경시킨다.

<STYLE>
.visivO { visibility:visible }
.visivX { visibility:hidden }
</STYLE>
<IMG id="img1Obj" src="../../gif/flower1.jpg" height="100"
  onmouseover="img2Obj.className='visivX'" onmouseout="img2Obj.className='visivO'">
<IMG id="img2Obj" src="../../gif/flower.jpg" height="100"
  onmouseover="img1Obj.style.visibility='hidden'" onmouseout="img1Obj.style.visibility='visible'">

Netscape visibility 속성 예제

<LAYER name=aboveLayer bgcolor='lightgreen' top=50 left=80 width=150 height=50 style="border:solid 1 blue"
  onMouseOver="visibility='hide'">
이곳에 mouseOver 하여 layer 보임의 변화를 보라.
</LAYER>

<LAYER name=belowLayer above=aboveLayer bgcolor='lightblue' top=20 left=20 width=150 height=50 style="border:solid 1 red">
이부분은 아래 layer이다.
</LAYER>