HTML | DOM Details Object
The DOM Details Object is used to represent the HTML <details> element. The Details element is accessed by getElementById().
Properties:
- open: The details tag has an attribute called ‘open’ which is used to display the hidden information by default.
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “details” tag.
Example-1:
HTML
<!DOCTYPE html><html><head> <title>DOM details Object</title> <style> h2 { color: green; font-size: 35px; } summary { font-size: 40px; color: #090; font-weight: bold; } </style></head><body> <center> <h2>DOM Details Object </h2> <!-- assigning id to details tag. --> <details id="GFG"> <summary>GeeksforGeeks</summary> <p>A computer science portal for geeks</p> <div>It is a computer science portal where you can learn programming.</div> </details> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { // Accessing details tag. var x = document.getElementById("GFG"); // Display hidden information // using open property. x.open = true; } </script> </center></body></html> |
Output:
Before Clicking On Button :
After Clicking n Button:
Example-2: Details Object can be created by using the document.createElement method.
HTML
<!DOCTYPE html><html><head> <title>HTML DOM Details Object</title> <style> h1, h2 { text-align: center; } h1 { color: green; } button { margin-left: 40%; } details { font-size: 30px; color: green; text-align: center; margin-top: 30px; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>DOM Details Object</h2> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var g = document.createElement("DETAILS"); g.setAttribute("id", "GFG"); document.body.appendChild(g); var f = document.createElement("SUMMARY"); var text = document.createTextNode("GeeksForGeeks"); f.appendChild(text); document.getElementById("GFG").appendChild(f); var z = document.createElement("p"); var text2 = document.createTextNode( "A Computer Science PortaL For Geeks"); z.appendChild(text2); document.getElementById("GFG").appendChild(z); } </script></body></html> |
Output:
Before Clicking On Button :
After Clicking On Button:
Supported Browsers: The browser supported by DOM Details Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...