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 |
瀏覽器相容性
載入中…