<div data-options>是在HTML中使用的一種自定義屬性，它允許開發人員向HTML元素添加額外的數據，以便在JavaScript中進行訪問和操作。這種屬性的表現形式是以"data-"開頭，后面緊跟著屬性名稱的形式。通過這種方式，開發人員可以在HTML元素中存儲數據，并在需要的時候使用JavaScript進行讀取和修改。
<div data-options>可以存儲各種類型的數據，包括字符串、數字、布爾值等等。這些數據可以用于不同的用途，如存儲配置參數、傳遞數據等。在JavaScript中，可以使用HTMLElement對象的dataset屬性來訪問和操作data-options中的數據。
下面是一些代碼示例，以更清晰地說明<div data-options>的用法和功能：

示例一：使用data-options存儲配置參數

<div data-options="{"width": "500", "height": "300"}"></div>
<br>
<script>
const element = document.querySelector('div[data-options]');
const options = JSON.parse(element.dataset.options);
<br>
  console.log(options.width);  // 輸出：500
console.log(options.height); // 輸出：300
</script>

在這個例子中，我們將一個包含配置參數的對象存儲在data-options中。通過使用JSON.parse函數，我們可以將存儲的字符串解析為一個JavaScript對象，并使用該對象訪問和操作配置參數。

示例二：使用data-options傳遞數據

<div data-options="{"name": "John", "age": "25"}"></div>
<br>
<button onclick="showData()">顯示數據</button>
<br>
<script>
function showData() {
const element = document.querySelector('div[data-options]');
const data = JSON.parse(element.dataset.options);
<br>
    console.log(data.name); // 輸出：John
console.log(data.age);  // 輸出：25
}
</script>

在這個例子中，我們將一個包含個人信息的對象存儲在data-options中。通過在一個事件處理函數中讀取data-options，我們可以在需要的時候訪問和顯示存儲的數據。

示例三：在多個元素上使用data-options

<div data-options="{"color": "red"}"></div>
<div data-options="{"color": "blue"}"></div>
<div data-options="{"color": "green"}"></div>
<br>
<script>
const elements = document.querySelectorAll('div[data-options]');
<br>
  elements.forEach(function(element) {
const data = JSON.parse(element.dataset.options);
<br>
    console.log(data.color);
});
</script>

在這個例子中，我們在多個<div>元素上使用data-options來存儲不同的顏色選項。通過使用querySelectorAll函數，我們可以選擇所有具有data-options屬性的<div>元素，并在循環中訪問和打印存儲的數據。
通過這些示例，我們可以看到<div data-options>是一個非常有用的HTML屬性，它提供了一種簡單而靈活的方式來存儲和訪問數據。無論是存儲配置參數，傳遞數據，還是在多個元素上使用，<div data-options>都可以幫助開發人員輕松地處理數據操作。