HTML DOM Details open屬性用法及代碼示例

HTML DOM Details open 屬性與 HTML <details> open 屬性相關聯。它是一個布爾屬性，用於指定詳細信息是否應該對用戶可見。當設置為 true 時，用戶可以看到詳細信息。但是，將其設置為 false 意味著對用戶隱藏詳細信息。

用法

以下是語法 -

設置詳細信息打開屬性 -

detailsObject.open = true|false

在這裏，true=Details 將被顯示，false=Details 將被隱藏。默認情況下隱藏詳細信息。

示例

讓我們看一個 Details 打開屬性的例子 -

<!DOCTYPE html>
<html>
<body>
<h2>Details open() property</h2>
<details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p>
</details>
<p>Click the below button to set the details to be visible to the user</p>
<button onclick="setDetail()">Visible</button>
<script>
   function setDetail() {
      document.getElementById("Details1").open = true;
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊 “Visible” 按鈕時 -

在上麵的例子中 -

我們創建了一個 <details< 元素，id 為 “Details1”，它有 <summary< 和一個 <p< 元素，其中包含一些文本 -

<details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
</p>
</details>

然後我們創建了按鈕 “Visible”，當用戶點擊時，它將執行 setDetail() 函數 -

<button onclick="setDetail()">Visible</button>

setDetail() 函數使用 getElementById() 獲取 <details> 元素並將其 open 屬性值設置為 true。這會向用戶顯示 <details> 中的信息 -

function setDetail() {
   document.getElementById("Details1").open = true;
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Details open property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。