APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

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

html5 来源：互联网 作者：佚名 发布时间：2025-03-21 21:26:15 人浏览
摘要

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

HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。

这个特性使得在不使用非标准属性或额外的 DOM 属性的情况下，能够在 HTML 元素上存储额外信息。

基本概念

自定义数据属性以 data- 为前缀，后面跟着自定义的属性名。例如：

1

<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 元素上定义：

1

2

3

4

5

6

7

<article

  id="electriccars"

  data-columns="3"

  data-index-number="12314"

  data-parent="cars">

  ...

</article>

2. 通过 JavaScript 访问

可以使用 dataset 属性来访问元素的自定义数据：

1

2

3

4

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 来修改自定义数据属性：

1

article.dataset.columns = 5;

4. 在 CSS 中使用

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

1

2

3

4

5

6

article[data-columns='3'] {

  width: 400px;

}

article[data-columns='4'] {

  width: 600px;

}

高级用法

1. 存储 JSON 数据

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

1

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

在 JavaScript 中解析：

1

2

3

const userData = document.getElementById('user-data');

const user = JSON.parse(userData.dataset.user);

console.log(user.name); // "John"

2. 事件委托

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

1

2

3

4

5

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

1

2

3

4

5

6

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

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

1

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

1

2

3

4

5

document.querySelector('button').addEventListener('click', function() {

  const url = this.dataset.loadUrl;

  const target = this.dataset.target;

  // 使用 url 加载数据并更新 target 元素

});

最佳实践

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

实际应用示例：交互式图表

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!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 方法作为替代：

1

2

3

4

// 现代浏览器

const value = element.dataset.myValue;

// 兼容旧浏览器

const value = element.getAttribute('data-my-value');

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • HTML5 data-*自定义数据属性的代码
    HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。 这个特性使得在不使用非标准属性或额外的

  • 基于Canvas的Html5多时区动态时钟实战代码

    基于Canvas的Html5多时区动态时钟实战代码
    出差旅行相信大家一定会住酒店，大家在酒店的前台进行预订的时候，是不是都会留意。通常在大堂的前方会有一面时钟，大概是下面这种

  • CSS弹性布局常用设置方式

    CSS弹性布局常用设置方式
    一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1v
  • 使用CSS3实现平滑的过渡动画效果
    要使用CSS3实现平滑的过渡动画，可以按照以下步骤进行： 1：定义初始状态：首先，为元素设置其初始样式。这通常是在CSS中直接定义的样
  • HTML5超链接的创建方法
    超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接

  • HTML5超链接和图片基础用法介绍

    HTML5超链接和图片基础用法介绍
    一、HTML5 超链接（链接） 超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的

  • HTML5 Input日期选择器的介绍

    HTML5 Input日期选择器的介绍
    HTML5 Input DatePicker 对象 1 Input Date 对象表示 HTML `input type=datetime` 元素。 是 HTML5 中的新对象。 访问 Input Date 对象 1 var x = document.getElementById(
  • HTML5 details标签的基础知识
    定义和用法 details标签规定用户可以根据需要打开和关闭的其他详细信息。 details标签通常用于创建用户可以打开和关闭的交互式小部件。默

  • HTML5使用details标签：展开/收缩信息

    HTML5使用details标签：展开/收缩信息
    details 标签提供了一种替代JavaScript的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于details 标签，单击
  • HTML5实现本地摄像头拍照与照片上传的方法介绍
    HTML5通过input type=file标签及其capture属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScri
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计