HTMLElement: hidden 属性

HTMLElement 属性 hidden 反映了元素的 hidden 属性的值。

值

此属性可以具有以下三种值之一

true: 元素隐藏。
false: 元素未隐藏。这是属性的默认值。
"until-found": 元素处于 隐藏直到找到 状态，这意味着它被隐藏，但如果通过页面内搜索找到或通过片段导航访问，它将被显示。

有关此属性用法的详细信息，请参阅反映此属性的 hidden HTML 属性页面。

示例

以下是一个隐藏块的示例，该块用于包含一个“感谢”消息，该消息在用户同意一项不寻常请求后显示。

HTML

HTML 包含两个面板：一个欢迎面板，它要求用户同意变得很棒，以及一个后续面板，它最初是隐藏的。

html

<div id="welcome" class="panel">
  <h1>Welcome to Foobar.com!</h1>
  <p>By clicking "OK" you agree to be awesome today!</p>
  <button class="button" id="okButton">OK</button>
</div>

<div id="awesome" class="panel" hidden>
  <h1>Thanks!</h1>
  <p>Thanks for agreeing to be awesome today!</p>
</div>

CSS

内容使用以下 CSS 样式化。

css

.panel {
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font:
    22px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}

JavaScript

JavaScript 向“确定”按钮添加了一个事件监听器，该监听器隐藏“欢迎”面板并显示“很棒”面板

document.getElementById("okButton").addEventListener(
  "click",
  () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("awesome").hidden = false;
  },
  false,
);

结果

规范

规范
HTML 标准 # dom-hidden

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

hidden 属性
display