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

2025-03-11 17:50

本文主要是介绍HTML5 data-*自定义数据属性的示例代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用...

引言

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-iddata-userdata-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. 通过 JavaMwGGFBnEcScript 修改

同样可以使用 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('buwww.chinasem.cntton').addEventListener('click', function() {
  const url = this.dataset.loadUrl;
  const target = this.dataset.target;
  // 使用 url 加载数据并更新 target 元素
});

最佳实践

  • 命名规范:使用有意义的、描述性的名称。遵循 kebab-case 命名约定(例如 data-user-id 而不是 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=js"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 属性存储每个条形的数据。
  • 通过事件委托,我们可以轻松地处理所有条形的点击事件。
  • 当点击一个条形时,我们使用存储在自定义数据属性中的信息来更新显示。

浏览器兼容性

China编程定义数据属性在所有现代浏览器中都得到了很好的支持。然而,在使用 dataset 属性时,需要注意 IE 10 及以下版本不支持此属性。对于需要支持旧版浏览器的项China编程目,可以使用 getAttribute 方法作为替代:

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

到此这篇关于HTML5 data-*自定义数据属性的文章就介绍到这了,更多相关html5 自定义数据属性内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章,希望大家以后多多支持编程China编程(www.chinasem.cn)!

这篇关于HTML5 data-*自定义数据属性的示例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153700

相关文章

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

C++11作用域枚举(Scoped Enums)的实现示例

《C++11作用域枚举(ScopedEnums)的实现示例》枚举类型是一种非常实用的工具,C++11标准引入了作用域枚举,也称为强类型枚举,本文主要介绍了C++11作用域枚举(ScopedEnums... 目录一、引言二、传统枚举类型的局限性2.1 命名空间污染2.2 整型提升问题2.3 类型转换问题三、C