HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
發(fā)布時間：2025-03-11 15:00:33 作者：I'mAllen 
我要評論
我要評論HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標準化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事件委托和動態(tài)內(nèi)容加載,并提供了最佳實踐和命名規(guī)范,感興趣的哦朋友一起學(xué)習(xí)吧
引言
HTML5 引入的自定義數(shù)據(jù)屬性（data-*）為開發(fā)者提供了一種將自定義數(shù)據(jù)嵌入HTML元素的標準方法。
這個特性使得在不使用非標準屬性或額外的 DOM 屬性的情況下，能夠在 HTML 元素上存儲額外信息。
基本概念
自定義數(shù)據(jù)屬性以 data- 為前綴，后面跟著自定義的屬性名。例如：
<div id="user" data-id="1234" data-user="johndoe" data-date-of-birth="1980-01-01">John Doe</div>
這里，我們定義了三個自定義數(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. 通過 JavaScript 訪問
可以使用 dataset 屬性來訪問元素的自定義數(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 中，屬性名會自動從 kebab-case 轉(zhuǎn)換為 camelCase。
3. 通過 JavaScript 修改
同樣可以使用 dataset 來修改自定義數(shù)據(jù)屬性：
article.dataset.columns = 5;
4. 在 CSS 中使用
可以在 CSS 中使用屬性選擇器來基于自定義數(shù)據(jù)屬性應(yīng)用樣式：
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}高級用法
1. 存儲 JSON 數(shù)據(jù)
可以在自定義數(shù)據(jù)屬性中存儲 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. 動態(tài)內(nèi)容加載
自定義數(shù)據(jù)屬性可用于存儲動態(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 元素
});最佳實踐
- 命名規(guī)范：使用有意義的、描述性的名稱。遵循 kebab-case 命名約定（例如
data-user-id而不是data-userId）。 - 避免存儲敏感信息：自定義數(shù)據(jù)屬性是公開可見的，不要用于存儲敏感數(shù)據(jù)。
- 保持數(shù)據(jù)簡單：雖然可以存儲復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，但最好保持簡單，便于維護。
- 不要過度使用：自定義數(shù)據(jù)屬性應(yīng)該用于存儲與元素緊密相關(guān)的數(shù)據(jù)，而不是作為通用存儲機制。
- 考慮性能：大量使用自定義數(shù)據(jù)屬性可能會增加 HTML 的大小，影響頁面加載速度。
- 保持一致性：在整個項目中保持自定義數(shù)據(jù)屬性使用的一致性。
實際應(yīng)用示例：交互式圖表
以下是一個使用自定義數(shù)據(jù)屬性創(chuàng)建簡單交互式圖表的例子：
<!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 = `類別 ${category}: ${value}`;
}
});
</script>
</body>
</html>在這個例子中：
- 我們使用
data-value和data-category屬性存儲每個條形的數(shù)據(jù)。 - 通過事件委托，我們可以輕松地處理所有條形的點擊事件。
- 當(dāng)點擊一個條形時，我們使用存儲在自定義數(shù)據(jù)屬性中的信息來更新顯示。
瀏覽器兼容性
自定義數(shù)據(jù)屬性在所有現(xiàn)代瀏覽器中都得到了很好的支持。然而，在使用 dataset 屬性時，需要注意 IE 10 及以下版本不支持此屬性。對于需要支持舊版瀏覽器的項目，可以使用 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ù)屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
Html5為我們提供了以 "data-" 為前綴定義需要的屬性即可設(shè)置自定義屬性。使用H5自定義屬性對象dataset來獲取。2020-04-01- 這篇文章主要介紹了Html5之自定義屬性(data-,dataset),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2019-11-19
- 這篇文章主要介紹了HTML5自定義屬性的問題分析,需要的朋友可以參考下2019-08-16
這篇文章主要介紹了詳解HTML5 data-* 自定義屬性的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-24HTML5自定義屬性前綴data-及dataset的使用方法(html5 新特性)
這篇文章主要介紹了HTML5自定義屬性前綴data-及dataset的使用方法(html5 新特性),需要的朋友可以參考下2017-08-24- 這篇文章主要介紹了HTML5中的標準屬性與自定義屬性,文中也談到了JavaScript操作DOM時訪問自定義屬性的一些相關(guān)知識點,非常推薦,需要的朋友可以參考下2016-02-18
html5的自定義data-*屬性與jquery的data()方法的使用
在HTML5規(guī)范里增加了一個自定義data屬性，你可以拿它做很多有用的事情，下面為大家介紹下HTML5的自定義data-* 屬性和jquery的data()方法的使用，感興趣的朋友不要錯過2014-07-02- HTML5 增加了一項新功能是 自定義數(shù)據(jù)屬性 ，也就是 data-* 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來設(shè)置我們需要的自定義屬性，來進行一些數(shù)據(jù)的存放2014-04-10
HTML5自定義data-* data(obj)屬性和jquery的data()方法的使用
可能大家在使用jquery mobile時，經(jīng)常會看到data-role、data-theme等的使用，這些都是HTML5自定義屬性,本文整理一些，需要的朋友可以參考下2012-12-13
