隐藏

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 事件