Style visibility 속성

정의 및 사용법

visibility 속성은 요소가 보이거나 숨겨져야 하는지 설정하거나 반환합니다.

visibility 속성이 작성자에게 요소를 표시하거나 숨기는 것을 허용합니다.

이 속성은 display 속성이렇게 설정하면 display:none이는 전체 요소를 숨기지만 visibility:hidden 요소의 내용은 보이지 않지만 원래 위치와 크기를 유지합니다.

자세히 보기:

CSS 강의:CSS Display 및 visibility

CSS 참조 설명서:visibility 속성

예제

예제 1

<p> 요소의 내용 숨기기:

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

직접 시도해보세요

页面下方 더 많은 예제 제공.

문법

visibility 속성 반환:

object.style.visibility

visibility 속성 설정:

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

속성 값

값 설명
visible 이 요소는 보이는 것입니다. 기본 값.
hidden 요소는 보이지 않지만 레이아웃에 영향을 미칩니다.
collapse 테이블 행이나 셀에서 사용할 때 요소는 보이지 않습니다. ("hidden"와 같습니다).
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 继承 합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： visible
반환 값： 문자열로 표현된 요소가 표시되는지 여부를 나타냅니다。
CSS 버전： CSS2

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

더 많은 예제

예제 2

display 속성과 visibility 속성의 차이：

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

직접 시도해보세요

예제 3

요소를 숨기고 표시하는 것 사이를 전환하다：

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

직접 시도해보세요

예제 4

이미지 요소를 숨기고 표시하다：

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

직접 시도해보세요

예제 5

返回 <p> 元素的可见性类型：

alert(document.getElementById("myP").style.visibility);

직접 시도해보세요