HTML hidden 属性

HTML hidden 语法

在 HTML 中，hidden 是一个全局属性，意味着它可以用于任何 HTML 元素。

hidden 用于隐藏一个元素。当元素被隐藏时，它不会在页面中显示，但仍然会存在于 DOM 中，并且可以被 JavaScript 访问和操作。

语法：

<element hidden>

说明：

element 是要隐藏的元素。hidden 是一个布尔属性。在 HTML5 标准中，下面 2 种写法是等价的。

<!--写法1-->
<element hidden>

<!--写法2-->
<element hidden="hidden">

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。你不需要给它们赋一个显式的值（比如 true 或 false）就能让它们生效。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML hidden 摘要

属于	HTML 属性
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML hidden 示例

接下来，我们通过几个简单的例子来讲解一下 HTML hidden 属性是如何使用的。

示例 1：hidden 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>这是一段显示文本。</p>
    <p hidden>这是一段隐藏文本。</p>
</body>
</html>

页面效果如下图所示。

HTML hidden属性的基本用法

分析：

由于这里给第 2 个 p 元素加上了 hidden 属性，因此默认情况下该元素是不显示出来的。不过我们可以在控制台可以看出，加上了 hidden 属性的元素依然是存在于 DOM 中的，如下图所示。

加上hidden属性的HTML元素

示例 2：JavaScript 动态修改 hidden 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn">显示</button>
    <p id="txt" hidden>绿叶网 - 为好教程，全力以赴</p>
    <script>
        const oBtn = document.getElementById("btn");
        const oTxt = document.getElementById("txt");

        oBtn.addEventListener("click", function() {
            oTxt.hidden = false;
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当单击【显示】按钮之后，页面效果如下图 2 所示。

JavaScript 动态修改 hidden 属性（效果 1）

JavaScript 动态修改 hidden 属性（效果 2）

“HTML 的 hidden 属性” 与 “CSS 的 display: none;” 区别

“HTML 的 hidden 属性” 与 “CSS 的 display 属性” 都可以用于隐藏一个元素，并且 hidden 属性本质上也是使用 “display: none;” 来隐藏元素，不过它们之间在语义上是存在区别的：

hidden：是一个 HTML 属性，它是语义上的 “隐藏”（或 “不相关”）。
display：是一个 CSS 属性，它只是纯样式上的 “隐藏”。

需要注意的是，CSS 的 display 属性优先级高于 HTML 的 hidden 属性。如果一个元素设置了 hidden 属性，但在 CSS 中又给它设置了 display: block 或其他显示值，那么该元素依然会显示。

示例 3：hidden 属性优先级

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            display: block;
        }
    </style>
</head>
<body>
    <p hidden>绿叶网 - 为好教程，全力以赴</p>
</body>
</html>

页面效果如下图所示。

HTML hidden属性优先级

分析：

在这个例子中，虽然 p 元素使用了 hidden 属性，但我们又在 CSS 中使用了 display: block;，此时 p 元素不再隐藏，而是显示出来。