資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理
社會學
時尚
法律HTML DOM Details open 屬性
HTML DOM Details open 屬性與 HTML <details> open 屬性相關聯。它是一個布林屬性，用於指定詳細資訊是否對使用者可見。當設定為 true 時，這些詳細資訊對使用者可見。但是，當設定為 false 時，意味著對使用者隱藏這些詳細資訊。
語法
以下是語法 -
設定 details open 屬性 -
detailsObject.open = true|false
此處，true=顯示詳細資訊，false=隱藏詳細資訊。詳細資訊預設隱藏。
示例
讓我們看一個 Details open 屬性的示例 -
<!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>輸出
這將生成以下輸出 -
單擊“可見”按鈕 -
在上述示例中 -
我們建立了一個 id 為 “Details1” 的 <details< 元素，其中包含 <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>
然後，我們建立了按鈕“可見”，該按鈕會在使用者單擊時執行 setDetail() 函式 -
<button onclick="setDetail()">Visible</button>
setDetail() 函式使用 getElementById() 獲取 <details> 元素並將其 open 屬性的值設定為 true。這種做法會向用戶顯示 <details> 內的資訊 −
function setDetail() {
document.getElementById("Details1").open = true;
}
更新於：15-Feb-2021
97 次瀏覽
廣告