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 #2222dd;
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 会为“OK”按钮添加一个事件监听器，该监听器会隐藏“欢迎”面板并显示“很棒”面板。
js
document.getElementById("okButton").addEventListener("click", () => {
document.getElementById("welcome").hidden = true;
document.getElementById("awesome").hidden = false;
});
结果
规范
| 规范 |
|---|
| HTML # dom-hidden |
浏览器兼容性
加载中…