資料結構
網路
關系型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英文
經濟學
心理學
社會科學
時尚研究
法律研究HTML DOM Details物件
HTML DOM Details 物件與 HTML <details> 元素相關聯。這讓我們只需在使用者希望看到相關資訊時才顯示該資訊。
屬性
以下為 Details 物件的屬性列表 −
| 序號 | 屬性 & 說明 |
|---|---|
| 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() 函式使用檔案的 createElement() 方法建立一個 <details> 元素，並將其指定給變數 et。接著我們使用檔案物件的 createElement() 方法建立另一個屬於 <details> 元素的一部分且包含在其中的元素 <summary>，並將其指定給變數 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);
}
更新日期： 2021-02-15
61 人瀏覽
廣告