HTML 隐藏元素-html教程-PHP中文网

HTML 隐藏元素

PHPz

发布： 2024-09-04 16:42:32

原创

512 人浏览过

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

隐藏属性的使用

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

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

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

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

语法

<element hidden> </element>

登录后复制

HTML 隐藏元素示例

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

示例#1

代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>

登录后复制

输出：

HTML 隐藏元素

示例#2

代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>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>
</body>
</html>

登录后复制

输出：

HTML 隐藏元素

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

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

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

代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>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>
</body>
</html>

登录后复制

输出：

HTML 隐藏元素