스타일 가시성 속성
예시
<p> 요소의 내용 숨기기:
document.getElementById("myP").style.visibility = "hidden";
정의 및 사용
가시성 속성은 요소가 표시되어야 하는지 여부를 설정하거나 반환합니다.
가시성 속성을 사용하면 작성자가 요소를 표시하거나 숨길 수 있습니다. display 속성 과 비슷합니다 . 그러나 차이점은 를 설정 display:none
하면 전체 요소를 숨기는 반면 요소 visibility:hidden
의 내용은 보이지 않지만 요소는 원래 위치와 크기를 유지한다는 것을 의미합니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
visibility | Yes | Yes | Yes | Yes | Yes |
통사론
가시성 속성을 반환합니다.
object.style.visibility
가시성 속성을 설정합니다.
object.style.visibility = "visible|hidden|collapse|initial|inherit"
속성 값
Value | Description |
---|---|
visible | The element is visible. This is default |
hidden | The element is not visible, but still affects layout |
collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 보이는 |
---|---|
반환 값: | 요소의 내용이 표시되는지 여부를 나타내는 String |
CSS 버전 | CSS2 |
더 많은 예
예시
표시 속성과 가시성 속성의 차이점:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
예시
요소 숨기기 및 표시 간 전환:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
예시
<img> 요소 숨기기 및 표시:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
예시
<p> 요소의 가시성 유형을 반환합니다.
alert(document.getElementById("myP").style.visibility);
관련 페이지
CSS 자습서: CSS 표시 및 가시성
CSS 참조: 가시성 속성
❮ 스타일 개체