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

列印頁面