数据结构
网络
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 次浏览
广告