HTML DOM Details open 属性

HTML DOM Details open 属性与 HTML <details> 打开属性关联。它是一个布尔属性，用于指定详细信息是否对用户可见。设置为 true 时，详细信息对用户可见。设置为 false 时，详细信息对用户隐藏。

语法

以下是语法 −

设置详细信息打开属性 −

detailsObject.open = true|false

此处，true=Details 将显示，false=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>

输出

这将产生以下输出 −

点击"可见"按钮时，−

在上面的例子中，−

我们创建了一个 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>

然后，我们创建了按钮"Visible"，当用户点击该按钮时，它将执行 setDetail() 函数 −

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

setDetail() 函数使用 getElementById() 获取 <details> 元素，并将其 open 属性值设置为 true。这会将 <details> 中的信息显示给用户 −

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

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/