HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

發(fā)布時(shí)間：2025-03-11 15:00:33 作者：I'mAllen

HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲(chǔ)額外信息,可以通過(guò)JavaScript訪問(wèn)、修改和在CSS中使用,文章還介紹了高級(jí)用法,如存儲(chǔ)JSON數(shù)據(jù)、事件委托和動(dòng)態(tài)內(nèi)容加載,并提供了最佳實(shí)踐和命名規(guī)范,感興趣的哦朋友一起學(xué)習(xí)吧

引言

HTML5 引入的自定義數(shù)據(jù)屬性（data-*）為開(kāi)發(fā)者提供了一種將自定義數(shù)據(jù)嵌入HTML元素的標(biāo)準(zhǔn)方法。

這個(gè)特性使得在不使用非標(biāo)準(zhǔn)屬性或額外的 DOM 屬性的情況下，能夠在 HTML 元素上存儲(chǔ)額外信息。

基本概念

自定義數(shù)據(jù)屬性以 data- 為前綴，后面跟著自定義的屬性名。例如：

<div id="user" data-id="1234" data-user="johndoe" data-date-of-birth="1980-01-01">John Doe</div>

這里，我們定義了三個(gè)自定義數(shù)據(jù)屬性：data-id、data-user 和 data-date-of-birth。

使用自定義數(shù)據(jù)屬性

1. 在 HTML 中定義

自定義數(shù)據(jù)屬性可以在任何 HTML 元素上定義：

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  ...
</article>

2. 通過(guò) JavaScript 訪問(wèn)

可以使用 dataset 屬性來(lái)訪問(wèn)元素的自定義數(shù)據(jù)：

const article = document.querySelector('#electriccars');
console.log(article.dataset.columns); // "3"
console.log(article.dataset.indexNumber); // "12314"
console.log(article.dataset.parent); // "cars"

注意：在 JavaScript 中，屬性名會(huì)自動(dòng)從 kebab-case 轉(zhuǎn)換為 camelCase。

3. 通過(guò) JavaScript 修改

同樣可以使用 dataset 來(lái)修改自定義數(shù)據(jù)屬性：

article.dataset.columns = 5;

4. 在 CSS 中使用

可以在 CSS 中使用屬性選擇器來(lái)基于自定義數(shù)據(jù)屬性應(yīng)用樣式：

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

高級(jí)用法

1. 存儲(chǔ) JSON 數(shù)據(jù)

可以在自定義數(shù)據(jù)屬性中存儲(chǔ) JSON 數(shù)據(jù)：

<div id="user-data" data-user='{"name":"John", "age":30, "city":"New York"}'></div>

在 JavaScript 中解析：

const userData = document.getElementById('user-data');
const user = JSON.parse(userData.dataset.user);
console.log(user.name); // "John"

2. 事件委托

自定義數(shù)據(jù)屬性在事件委托中特別有用：

<ul id="user-list">
  <li data-user-id="1" data-user-name="Alice">Alice</li>
  <li data-user-id="2" data-user-name="Bob">Bob</li>
  <li data-user-id="3" data-user-name="Charlie">Charlie</li>
</ul>

document.getElementById('user-list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Clicked on user:', e.target.dataset.userName);
    console.log('User ID:', e.target.dataset.userId);
  }
});

3. 動(dòng)態(tài)內(nèi)容加載

自定義數(shù)據(jù)屬性可用于存儲(chǔ)動(dòng)態(tài)內(nèi)容加載所需的信息：

<button data-load-url="/api/users" data-target="#user-container">Load Users</button>

document.querySelector('button').addEventListener('click', function() {
  const url = this.dataset.loadUrl;
  const target = this.dataset.target;
  // 使用 url 加載數(shù)據(jù)并更新 target 元素
});

最佳實(shí)踐

命名規(guī)范：使用有意義的、描述性的名稱(chēng)。遵循 kebab-case 命名約定（例如 data-user-id 而不是 data-userId）。
避免存儲(chǔ)敏感信息：自定義數(shù)據(jù)屬性是公開(kāi)可見(jiàn)的，不要用于存儲(chǔ)敏感數(shù)據(jù)。
保持?jǐn)?shù)據(jù)簡(jiǎn)單：雖然可以存儲(chǔ)復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，但最好保持簡(jiǎn)單，便于維護(hù)。
不要過(guò)度使用：自定義數(shù)據(jù)屬性應(yīng)該用于存儲(chǔ)與元素緊密相關(guān)的數(shù)據(jù)，而不是作為通用存儲(chǔ)機(jī)制。
考慮性能：大量使用自定義數(shù)據(jù)屬性可能會(huì)增加 HTML 的大小，影響頁(yè)面加載速度。
保持一致性：在整個(gè)項(xiàng)目中保持自定義數(shù)據(jù)屬性使用的一致性。

實(shí)際應(yīng)用示例：交互式圖表

以下是一個(gè)使用自定義數(shù)據(jù)屬性創(chuàng)建簡(jiǎn)單交互式圖表的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互式圖表</title>
    <style>
        .bar {
            fill: steelblue;
            cursor: pointer;
        }
        .bar:hover {
            fill: brown;
        }
    </style>
</head>
<body>
    <svg width="500" height="300">
        <g id="chart">
            <rect class="bar" x="0" y="0" width="50" height="200" data-value="200" data-category="A"></rect>
            <rect class="bar" x="60" y="50" width="50" height="150" data-value="150" data-category="B"></rect>
            <rect class="bar" x="120" y="100" width="50" height="100" data-value="100" data-category="C"></rect>
            <rect class="bar" x="180" y="70" width="50" height="130" data-value="130" data-category="D"></rect>
            <rect class="bar" x="240" y="120" width="50" height="80" data-value="80" data-category="E"></rect>
        </g>
    </svg>
    <div id="info"></div>
    <script>
        document.getElementById('chart').addEventListener('click', function(e) {
            if (e.target.classList.contains('bar')) {
                const value = e.target.dataset.value;
                const category = e.target.dataset.category;
                document.getElementById('info').textContent = `類(lèi)別 ${category}: ${value}`;
            }
        });
    </script>
</body>
</html>

在這個(gè)例子中：

我們使用 data-value 和 data-category 屬性存儲(chǔ)每個(gè)條形的數(shù)據(jù)。
通過(guò)事件委托，我們可以輕松地處理所有條形的點(diǎn)擊事件。
當(dāng)點(diǎn)擊一個(gè)條形時(shí)，我們使用存儲(chǔ)在自定義數(shù)據(jù)屬性中的信息來(lái)更新顯示。

瀏覽器兼容性

自定義數(shù)據(jù)屬性在所有現(xiàn)代瀏覽器中都得到了很好的支持。然而，在使用 dataset 屬性時(shí)，需要注意 IE 10 及以下版本不支持此屬性。對(duì)于需要支持舊版瀏覽器的項(xiàng)目，可以使用 getAttribute 方法作為替代：

// 現(xiàn)代瀏覽器
const value = element.dataset.myValue;
// 兼容舊瀏覽器
const value = element.getAttribute('data-my-value');

到此這篇關(guān)于HTML5 data-*自定義數(shù)據(jù)屬性的文章就介紹到這了,更多相關(guān)html5 自定義數(shù)據(jù)屬性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：HTML5 自定義數(shù)據(jù)屬性 data-

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片