本篇重點屬性必須以 data- 為前綴建議使用 kebab-case 命名data-* 的常見應用時機JavaScript 使用 dataset. 取值jQuery 使用 .data() 或是 .attr() 取值HTML5 引入了 data-* 屬性，讓開發者可以在標籤上自訂屬性，儲存額外的資訊，並能夠被 JavaScript 獲取與操作。

命名規則html1

必須以 data- 為前綴

data- 是固定的屬性前綴，用於告訴瀏覽器這是一個自定義數據屬性。後續名稱只能包含

小寫字母（a-z）數字（0-9）中橫線（-）建議使用「kebab-case（短橫線命名法）」，例如 data-user-id，避免使用 data_user_id 或 dataUserId，這可能會影響取值的操作

data-* 屬性值可以是

字串數字JSON 格式常見應用時機前端與後端溝通的小型數據html1

  • 商品名稱
    • 控制前端行為html1統計與分析html1點擊我讀取 data-* 屬性的方法Javascript使用 dataset 物件讀取 data-* 屬性：

    dataset 會將 data-* 的 kebab-case 轉換為 camelCase（駝峰式命名法），例如 data-user-id 使用 dataset.userId 讀取如果屬性名稱包含大寫（不建議這樣做），JavaScript 仍然會轉為小寫處理。例如 data-User-Name 使用 dataset.userName 讀取 實例搶先看Javascript 讀取 data 屬性的方法dataset 會將 data-* 的 kebab-case 轉換為 camelCase（駝峰式命名法），例如 data-user-id 變成 dataset.userId如果屬性名稱包含大寫（不建議這樣做），JavaScript 仍然會轉為小寫處理。例如 data-User-Name 使用 dataset.userName 讀取html12345678

    js123456789101112131415const div = document.getElementById("example");const output = document.getElementById("output");// 取得 data-* 屬性值const userId = div.dataset.userId;const userName = div.dataset.userName;const role = div.dataset.role;const info = JSON.parse(div.dataset.info); // 解析 JSON 字串output.innerHTML = ` 使用者 ID: ${userId}
    使用者名稱: ${userName}
    角色: ${role}
    額外資訊: 名字 - ${info.name}, 年齡 - ${info.age}`;健忘筆記

    駝峰式命名（Camel case）是一種將單字相連的命名方式，並根據開頭字母的大小寫進一步細分為兩種類型。小駝峰命名（lower camel case）的開頭字母為小寫，例如 userId，而大駝峰命名（upper camel case）的開頭字母則為大寫，例如 UserId。

    烤肉串命名（Kebab case）是一種使用 - 來分隔單字的命名方式，例如：user-id。這種命名方式常見於網頁開發中，特別是在 CSS 類別名稱與部分 URL 結構中。

    JQuery可以使用 .data() 或是 attr() 存取 data-* 屬性：

    使用 .data() 讀取 data-*，無論屬性名稱使用 kebab-case 或 camelCase，都能正確獲取對應的值如果 data-* 的值是有效的 JSON，且在 HTML 載入時已經存在，.data() 會自動將其解析為 JavaScript 物件 實例搶先看JQuery 讀取 data 屬性的方法使用 .data() 讀取 data-*，無論屬性名稱使用 kebab-case 或 camelCase，都能正確獲取對應的值如果 data-* 的值是有效的 JSON，且在 HTML 載入時已經存在，.data() 會自動將其解析為 JavaScript 物件html123456789

    js1234567891011121314151617const div = $("#example");const output = $("#output");// 取得 data-* 屬性值const userId = div.data('user-id'); // kebab-case 也可讀取const userId2 = div.data('userId');const userName = div.data('userName');const role = div.attr('data-role');const info = div.data('info');$("#output").html(` 使用者 ID: ${userId}
    使用者 ID 2: ${userId2}
    使用者名稱: ${userName}
    角色: ${role}
    額外資訊: 名字 - ${info.name}, 年齡 - ${info.age}`);結論HTML 的 data-* 屬性是一種靈活且易用的方式，用於存儲自定義數據，方便前端操作，但有幾個需要注意的地方：

    避免存放敏感信息data-* 屬性數據是公開的，任何人都可以通過檢視原始碼或瀏覽器開發工具查看，避免存放密碼、API 金鑰等敏感資訊。

    適度使用data-* 屬性適合存放小型且靜態的數據。如果數據過於龐大或動態，建議改用其他方式，例如 API 或 JavaScript 物件。

    了解後能夠大幅提升程式碼的可讀性與維護性！

    延伸閱讀【MDN】data-* 介紹【MDN】dataset 介紹【jQuery 官方文件】.data() 介紹【Camel ‘s blog】常見的命名規則