隱藏

hidden 屬性用於指示不應將元素的內容呈現給使用者。此屬性可以取以下任何一個值

• 空字串
• 關鍵字 hidden
• 關鍵字 until-found

hidden 屬性與兩種狀態相關聯：隱藏狀態和隱藏直至找到狀態。

• 空字串或關鍵字 hidden 將元素設定為隱藏狀態。此外，無效值也將元素設定為隱藏狀態。
• 關鍵字 until-found 將元素設定為隱藏直至找到狀態。

因此，以下所有內容都將元素設定為 隱藏 狀態

<span hidden>I'm hidden</span>
<span hidden="">I'm also hidden</span>
<span hidden="hidden">I'm hidden too!</span>

以下內容將元素設定為 隱藏直至找到 狀態

<span hidden="until-found">I'm hidden until found</span>

hidden 屬性不得用於僅從一個簡報中隱藏內容。如果某些內容被標記為隱藏，則它將從所有簡報中隱藏，包括例如螢幕閱讀器。

不得從非隱藏元素連結隱藏元素。例如，使用 href 屬性連結到用 hidden 屬性標記的部分是不正確的。如果內容不適用或不相關，則沒有理由連結到它。

但是，可以使用 ARIA aria-describedby 屬性引用本身隱藏的描述。雖然隱藏描述意味著它們本身沒有用，但可以以這樣一種方式編寫它們，即它們在從描述它們的元素中引用的特定上下文中是有用的。

類似地，帶有 hidden 屬性的畫布元素可以被指令碼圖形引擎用作螢幕外緩衝區，並且表單控制元件可以使用其表單屬性引用隱藏的表單元素。

隱藏元素的後代元素仍然處於活動狀態，這意味著指令碼元素仍可以執行，表單元素仍可以提交。

隱藏狀態表示元素當前與頁面無關，或者它用於宣告供頁面其他部分重用的內容，並且不應直接呈現給使用者。瀏覽器不會呈現處於隱藏狀態的元素。

Web 瀏覽器可能會使用 display: none 實現隱藏狀態，在這種情況下，元素將不參與頁面佈局。這也意味著更改隱藏狀態下元素的 CSS display 屬性的值將覆蓋該狀態。例如，即使存在 hidden 屬性，樣式為 display: block 的元素也將顯示。

在隱藏直至找到狀態下，元素處於隱藏狀態，但其內容對瀏覽器的“頁面內查詢”功能或片段導航是可訪問的。當這些功能導致滾動到隱藏直至找到子樹中的元素時，瀏覽器將

• 在隱藏元素上觸發 beforematch 事件
• 從元素中刪除 hidden 屬性
• 滾動到元素

這使開發人員能夠摺疊一部分內容，但使其可透過查詢和片段導航訪問。

請注意，瀏覽器通常使用 content-visibility: hidden 實現隱藏直至找到。這意味著，與處於隱藏狀態的元素不同，處於隱藏直至找到狀態的元素將具有生成的框，這意味著

• 元素將參與頁面佈局
• 將呈現元素的邊距、邊框、填充和背景。

此外，元素需要受 佈局包含 的影響才能顯示。這意味著，如果處於隱藏直至找到狀態的元素的 display 值為 none、contents 或 inline，則頁面內查詢或片段導航將不會顯示該元素。

在此示例中，我們有

• 三個 <div> 元素。第一個和第三個沒有隱藏，而第二個具有 hidden="until-found" 和 id="until-found-box" 屬性。
• 目標是 "until-found-box" 片段的連結。

隱藏直至找到的元素具有點狀紅色邊框和灰色背景。

我們還有一些 JavaScript 程式碼，用於偵聽在隱藏直至找到的元素上觸發的 beforematch 事件。事件處理程式更改框的文字內容。

HTML

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

<button id="reset">Reset</button>

CSS

div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#until-found-box {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}

#until-found-box {
  scroll-margin-top: 200px;
}

JavaScript

const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);

document.querySelector("#reset").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});

結果

請注意，儘管元素的內容已隱藏，但元素仍然具有生成的框，在佈局中佔用空間並呈現背景和邊框。

單擊“轉到隱藏內容”按鈕將導航到隱藏直至找到的元素。beforematch 事件觸發，文字內容更新，並顯示元素內容。

要再次執行示例，請單擊“重置”。

• HTMLElement.hidden
• 所有 全域性屬性
• aria-hidden 屬性
• beforematch 事件