HTML 隱藏元素-html教學-PHP中文網

HTML 隱藏元素

PHPz

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

原創

511 人瀏覽過

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 隱藏元素

要記住的重要要點

在與隱藏屬性互動之前應該了解一些重要的要點：

可以在離散解析度和螢幕尺寸上存取的內容不應使用隱藏屬性來隱藏內容。
隱藏屬性不應該有利於隱藏/覆蓋內容切換器或選項卡元件的不可見部分。
非隱藏元素不應超連結到隱藏元素。
標記為隱藏的元素仍然可能處於活動狀態。
如果您想要對所有使用者隱藏內容，請使用 HTML5 隱藏屬性（以及 CSS 顯示：對於尚未支援隱藏的瀏覽器，則為 none）。無需使用 aria-hidden。