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);

ကိုယ်တိုင် ကျင်းပပါ