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

छवि <img> एलिमेंट को छुपाएं और दिखाएं:

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

अपने आप प्रयास करें

उदाहरण 5

वापस <p> एलिमेंट की दृश्यता प्रकार दें:

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

अपने आप प्रयास करें