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

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.