HTML - hidden 属性

HTML 的 **hidden** 是一个全局属性，用于临时隐藏元素，使其对用户不可见。此属性主要用于存在条件的情况，例如用户必须登录才能查看。

例如，它用于隐藏页面中在完成登录过程之前无法使用的元素。登录完成后，可以使用 JavaScript 代码使其可见。

语法

<element hidden> ...content</element>

应用于

hidden 属性可以应用于任何 HTML 元素以将其隐藏在用户面前。但是，有些元素通常不支持或不适合隐藏，例如 **<html>，<head>，<title>** 等标签是无法隐藏的。

HTML hidden 属性示例

以下示例将说明 HTML hidden 属性，以及我们应该在何处以及如何使用此属性！

隐藏一个 span 元素

在以下示例中，我们创建了一个句子，并将一个关键字放在 <span> 标签内，我们在其中使用 hidden 属性隐藏了“space”一词。

<!DOCTYPE html>
<html>

<body>
    <h3>HTML hidden Attribute</h3>
    <p>
        <!-- HTML hidden Attribute used on span Tag -->
        A hidden element does not take <span hidden>space</span> as well
    </p>
</body>

</html>

隐藏图片元素

在此示例中，我们将使用相同的方法隐藏 img 元素，我们可以直接在 img 标签上应用 hidden 属性。

<!DOCTYPE html>
<html lang="en">

<body> 
    <h3>HTML hidden Attribute</h3>
    <strong>This image is not hidden</strong>
    <br>
    <img src="html/images/html.jpg" alt="Image 1" width="200"> 
    <br> 
    <strong>This image is hidden</strong>
    <br>
    <img src="html/images/html.jpg" alt="Image 4" width="200" hidden> 
</body>

</html>

隐藏元素占用空间

在此示例中，我们将创建三个 div 并设置边框，以检查如果我们隐藏 div，它是否会占用空间。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div{
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body> 
    <h3>HTML hidden Attribute</h3>
    <div>
        <p>This is paragraph Element inside of a div Element</p>
    </div>
    <br>
    <div hidden>
        <p>This is paragraph Element inside of a div Element</p>
    </div>
    <br>
    <div>
        <p>This is paragraph Element inside of a div Element</p>
    </div>
    <p>
        Note: If you remove the hidden keyword from second 
        div element you can will see the gap between the div 
        reduce that is because of <br> tag.
    </p>
</body>

</html>

支持的浏览器

属性
hidden	是 6.0	是 11.0	是 4.0	是 5.1	是 11.1

html_attributes_reference.htm

打印页面