HTML 隐藏元素

HTML5 中隐藏的全局属性是布尔属性。它规定目标元素是否与 HTML 文档进一步相关。使用隐藏属性的一个此类示例是，它可用于覆盖/揭示 HTML 网页上存在的未经授权的任何特定内容，除非用户已通过身份验证。在此之前，浏览器不会渲染具有活动隐藏属性（即设置了属性）的元素。

隐藏属性的使用

隐藏属性的一种用法就像让用户看不到某个元素，直到满足某些条件（例如选择单选按钮等），然后 JavaScript 代码可以重新规定隐藏属性，从而使元素可见。此属性不应仅用于隐藏个人演示的内容；相反，如果任何内容被隐藏，则所有演示文稿都应保持相同的状态。

隐藏的内容不应与未隐藏的内容或仍处于活动状态的隐藏内容的后代内容相关联。这确保了表单元素仍然可以被提交并且脚本元素仍然可以被执行。然而，脚本和元素可以引用隐藏在其他上下文中的任何内容。

使用 是完全不正确的。现实场景中的属性连接到用隐藏属性发音的部分。如果链接的内容既不相关也不适用，则无需将它们打包在一起。根据隐藏属性的定义，我们可以使用隐藏属性隐藏 HTML 网页中存在的任何内容，然后可以使用 JavaScript 代码来访问它。隐藏元素的目标也可以通过 CSS 来实现，将属性设置为显示属性（即将其设置为无），但使用隐藏属性是一种简单的方法。

注意：更改具有隐藏属性的元素上的 CSS 显示属性值会覆盖其行为。例如，尽管存在隐藏属性，样式为 display: flex 的元素仍将显示。

语法

<element hidden> </element>

HTML 隐藏元素示例

下面给出的是 HTML 隐藏元素的示例：

示例#1

代码：

<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>


<h1 id="EDUCBA">EDUCBA</h1>
<h2 id="HTML-Hide-element">HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>

输出：

示例#2

代码：

<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>


<h1 id="EDUCBA">EDUCBA</h1>
<h2 id="HTML-Hide-element">HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's             <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>

输出：

示例 #3 – 属性的有用性。

根据隐藏属性的定义，我们可以使用隐藏属性隐藏 HTML 网页中存在的任何内容，然后可以使用 JavaScript 代码来访问它。隐藏元素的目标也可以通过 CSS 来实现，并将该属性设置为 display 属性（即将其设置为 none），但使用隐藏属性是一种简单的方法。因此，我们可以说具有隐藏属性的内容是 DOM 的一部分，但用户无法访问它。

在下面的示例中，我们将选择 使用 JavaScript 代码的隐藏元素的一部分：

代码：

<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>


<h1 id="EDUCBA">EDUCBA</h1>
<h2 id="HTML-Hide-element">HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>

输出：

要记住的重要要点

在与隐藏属性交互之前应该了解一些重要的要点：

• 可以在离散分辨率和屏幕尺寸上访问的内容不应使用隐藏属性来隐藏内容。
• 隐藏属性不应该有利于隐藏/覆盖内容切换器或选项卡组件的不可见部分。
• 非隐藏元素不应超链接到隐藏元素。
• 标记为隐藏的元素仍然可能处于活动状态。
• 如果您想对所有用户隐藏内容，请使用 HTML5 隐藏属性（以及 CSS 显示：对于尚不支持隐藏的浏览器，则为 none）。无需使用 aria-hidden。

结论

下面提到的是本主题中您应该记住的一些主要要点。

隐藏属性的合适用例包括：

• 尚不相关但稍后可能需要的内容。
• 以前使用过但不再需要的内容。
• 可重复使用的内容，并以类似模板的方式被页面的各个其他部分使用。
• 创建离屏画布作为绘图缓冲区。

隐藏属性的不合适用例包括：

• 在选项卡式对话框中隐藏面板。
• 隐藏单个演示文稿中的内容，同时希望其在其他演示文稿中可见。

注意：隐藏的元素不应与其他非隐藏元素链接，直到它们相关为止。

以上是HTML 隐藏元素的详细内容。更多信息请关注PHP中文网其他相关文章！