90人参与 • 2025-03-11 • html5
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。
自定义数据属性可以在任何 html 元素上定义：
<article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article>
可以使用 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。
同样可以使用 dataset 来修改自定义数据属性：
article.dataset.columns = 5;
可以在 css 中使用属性选择器来基于自定义数据属性应用样式：
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}可以在自定义数据属性中存储 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"自定义数据属性在事件委托中特别有用：
<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);
}
});自定义数据属性可用于存储动态内容加载所需的信息：
<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 元素
});data-user-id 而不是 data-userid）。实际应用示例：交互式图表
以下是一个使用自定义数据属性创建简单交互式图表的例子：
<!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 属性存储每个条形的数据。自定义数据属性在所有现代浏览器中都得到了很好的支持。然而，在使用 dataset 属性时，需要注意 ie 10 及以下版本不支持此属性。对于需要支持旧版浏览器的项目，可以使用 getattribute 方法作为替代：
// 现代浏览器
const value = element.dataset.myvalue;
// 兼容旧浏览器
const value = element.getattribute('data-my-value');到此这篇关于html5 data-*自定义数据属性的文章就介绍到这了,更多相关html5 自定义数据属性内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
您想发表意见！！点此发布评论
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
发表评论