HTML DOM Details 对象

htmlweb developmentfront end technology更新于 2024/5/20 9:16:17

HTML DOM Details 对象与 HTML <details> 元素关联。这使我们能够隐藏仅在用户需要时才显示的信息。

属性

以下是详细信息对象的属性 −

Sr.No	属性 &说明
1	open 设置或返回详细信息是否对用户可见。

语法

以下是语法 −

创建 Details 对象 −

var p = document.createElement("DETAILS");

示例

让我们看一个 HTML DOM Details 对象的示例 −

<!DOCTYPE html>
<html>
<body>
<h2>Details object</h2>
<p>Click the below button to create a DETAILS element about a monument</p>
<button onclick="detCreate()">CREATE</button>
<br><br>
<script>
   function detCreate() {
      var et = document.createElement("DETAILS");
      var sum=document.createElement("SUMMARY");
      var sumText=document.createTextNode("Eiffel Tower");
      var txt = document.createTextNode("It is one of the most popular monument in the world");
      sum.appendChild(sumText);
      et.appendChild(txt);
      document.body.appendChild(sum);
      document.body.appendChild(et);
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"创建"按钮，然后点击箭头展开详细信息 −

在上面的例子中 −

我们创建了一个 CREATE 按钮，当用户点击该按钮时，它将执行 detCreate() 函数 −

<button onclick="detCreate()>CREATE</button>

detCreate() 函数使用 document 对象的 createElement() 方法创建一个 <details> 元素，并将其赋值给变量 et。然后，我们创建另一个元素 <summary>，它是 <details> 元素的一部分，并通过 document 对象的 createElement() 方法包含在其中，并将其赋值给变量 sum。

然后创建两个文本节点 sumtxt 和 txt，分别附加到 <summary> 和 <details> 元素。使用 appendChild() 方法将新创建的 <summary> 元素和 details 元素附加到文档主体，并将要附加的元素作为参数传递 −

function detCreate() {  
   var et = document.createElement("DETAILS");  
   var sum=document.createElement("SUMMARY");  
   var sumText=document.createTextNode("Eiffel Tower");  
   var txt = document.createTextNode("It is one of the most popular monument in the world");    
   sum.appendChild(sumText);  
   et.appendChild(txt);  
   document.body.appendChild(sum);  
   document.body.appendChild(et);
}