以下是一个简单的例子,演示如何使用 JavaScript 操控 <details> 元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Object Example</title>
</head>
<body>
<details id="myDetails">
<summary>Click me to toggle details</summary>
<p>This is some detailed information.</p>
</details>
<script>
// 获取 details 元素
var detailsElement = document.getElementById('myDetails');
// 设置 details 元素的开合状态
detailsElement.open = true;
// 添加事件监听器,以便在状态改变时执行操作
detailsElement.addEventListener('toggle', function() {
console.log('Details state changed:', detailsElement.open);
});
</script>
</body>
</html>
在这个例子中,我们首先通过 getElementById 获取了一个具有特定 id("myDetails")的 <details> 元素。然后,我们通过设置 open 属性来改变元素的开合状态。我们还添加了一个事件监听器,以便在 <details> 元素的状态改变时输出相关信息到控制台。
通过 JavaScript 操控 <details> 元素,你可以在用户交互时控制详细信息部分的显示和隐藏。
转载请注明出处:http://www.zyzy.cn/article/detail/6202/JavaScript 和 HTML DOM