HTML5 data-*自定义数据属性的示例代码

发布者: 土豆服务器 | 发布时间: 2025-6-14 15:04| 查看数: 100| 评论数: 0|帖子模式

引言

HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。
这个特性使得在不使用非标准属性或额外的 DOM 属性的情况下，能够在 HTML 元素上存储额外信息。

基本概念

自定义数据属性以

data-

复制代码

为前缀，后面跟着自定义的属性名。例如：

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

复制代码

这里，我们定义了三个自定义数据属性：

data-id

复制代码

、

data-user

复制代码

和

data-date-of-birth

复制代码

。

使用自定义数据属性

1. 在 HTML 中定义

自定义数据属性可以在任何 HTML 元素上定义：

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

复制代码

2. 通过 JavaScript 访问

可以使用

dataset

复制代码

属性来访问元素的自定义数据：

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 转换为 camelCase。

3. 通过 JavaScript 修改

同样可以使用

dataset

复制代码

来修改自定义数据属性：

article.dataset.columns = 5;

复制代码

4. 在 CSS 中使用

可以在 CSS 中使用属性选择器来基于自定义数据属性应用样式：

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

复制代码

高级用法

1. 存储 JSON 数据

可以在自定义数据属性中存储 JSON 数据：

<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. 事件委托

自定义数据属性在事件委托中特别有用：

<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. 动态内容加载

自定义数据属性可用于存储动态内容加载所需的信息：

<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 加载数据并更新 target 元素
});

复制代码

最佳实践

命名规范：使用有意义的、描述性的名称。遵循 kebab-case 命名约定（例如
1. data-user-id
复制代码
而不是
1. data-userId
复制代码
）。
避免存储敏感信息：自定义数据属性是公开可见的，不要用于存储敏感数据。
保持数据简单：虽然可以存储复杂的数据结构，但最好保持简单，便于维护。
不要过度使用：自定义数据属性应该用于存储与元素紧密相关的数据，而不是作为通用存储机制。
考虑性能：大量使用自定义数据属性可能会增加 HTML 的大小，影响页面加载速度。
保持一致性：在整个项目中保持自定义数据属性使用的一致性。

实际应用示例：交互式图表
以下是一个使用自定义数据属性创建简单交互式图表的例子：

<!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>

复制代码

在这个例子中：

我们使用
1. data-value
复制代码
和
1. data-category
复制代码
属性存储每个条形的数据。
通过事件委托，我们可以轻松地处理所有条形的点击事件。
当点击一个条形时，我们使用存储在自定义数据属性中的信息来更新显示。

浏览器兼容性

自定义数据属性在所有现代浏览器中都得到了很好的支持。然而，在使用

dataset

复制代码

属性时，需要注意 IE 10 及以下版本不支持此属性。对于需要支持旧版浏览器的项目，可以使用

getAttribute

复制代码

方法作为替代：

// 现代浏览器
const value = element.dataset.myValue;
// 兼容旧浏览器
const value = element.getAttribute('data-my-value');

复制代码

到此这篇关于HTML5 data-*自定义数据属性的文章就介绍到这了,更多相关html5 自定义数据属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/977897.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

HTML5 data-*自定义数据属性的示例代码

最新评论

新人须知

常见问题

维权申诉

关注微博

扫描微信

关于合作

通讯联系