<div> 是一個HTML標簽，用來定義HTML文檔中的一個塊元素。在這個塊元素中，我們可以放置各種其他HTML元素，比如文本、圖像、表格等等。同時，<div> 標簽也支持一些特殊的屬性，比如data屬性，用來存儲自定義的數據。這些數據可以在JavaScript中被訪問和操作。
<div> 標簽的 data 屬性是一個用來存儲自定義數據的屬性。我們可以給這個屬性賦值一個字符串，用來表示我們想要存儲的數據。在JavaScript中，我們可以通過訪問這個元素的 data 屬性來獲取到這個字符串。
以下是幾個關于 <div> 內容 data 的示例：
1. 存儲用戶ID <div data-user-id="123456">...</div> 這個例子中，我們給 <div> 標簽的 data 屬性賦值了一個 "user-id" 的鍵，值為 "123456"。在JavaScript中，我們可以使用以下代碼來獲取到這個存儲的用戶ID： const divElement = document.querySelector('div'); const userId = divElement.dataset.userId; console.log(userId); // 輸出: 123456
2. 存儲用戶信息對象 <div data-user-info='{"name": "Alice", "age": 25, "gender": "female"}'>...</div> 這個例子中，我們將一個用戶信息對象以字符串的形式存儲在 <div> 標簽的 data 屬性中。在JavaScript中，我們可以使用以下代碼來獲取到這個存儲的用戶信息： const divElement = document.querySelector('div'); const userInfo = JSON.parse(divElement.dataset.userInfo); console.log(userInfo.name); // 輸出: Alice console.log(userInfo.age); // 輸出: 25 console.log(userInfo.gender); // 輸出: female
3. 存儲列表數據數組 <div data-list='[1, 2, 3, 4, 5]'>...</div> 這個例子中，我們將一個包含一組數據的數組以字符串的形式存儲在 <div> 標簽的 data 屬性中。在JavaScript中，我們可以使用以下代碼來獲取到這個存儲的列表數據： const divElement = document.querySelector('div'); const dataList = JSON.parse(divElement.dataset.list); console.log(dataList); // 輸出: [1, 2, 3, 4, 5]
通過使用 <div> 內容 data 屬性，我們可以方便地存儲和訪問自定義的數據。這些數據可以在JavaScript中被輕松地獲取和操作，為我們的網頁開發提供了更多的靈活性和交互性。