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

相关文章

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Python中logging模块用法示例总结

《Python中logging模块用法示例总结》在Python中logging模块是一个强大的日志记录工具,它允许用户将程序运行期间产生的日志信息输出到控制台或者写入到文件中,:本文主要介绍Pyt... 目录前言一. 基本使用1. 五种日志等级2.  设置报告等级3. 自定义格式4. C语言风格的格式化方法

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识:Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景:qt5.12.12+vs2022一、症状:二、原因:(可以跳过,直奔后面的解决方法)三、解决方

MySQL中On duplicate key update的实现示例

《MySQL中Onduplicatekeyupdate的实现示例》ONDUPLICATEKEYUPDATE是一种MySQL的语法,它在插入新数据时,如果遇到唯一键冲突,则会执行更新操作,而不是抛... 目录1/ ON DUPLICATE KEY UPDATE的简介2/ ON DUPLICATE KEY UP

Python中Json和其他类型相互转换的实现示例

《Python中Json和其他类型相互转换的实现示例》本文介绍了在Python中使用json模块实现json数据与dict、object之间的高效转换,包括loads(),load(),dumps()... 项目中经常会用到json格式转为object对象、dict字典格式等。在此做个记录,方便后续用到该方

MySQL分库分表的实践示例

《MySQL分库分表的实践示例》MySQL分库分表适用于数据量大或并发压力高的场景,核心技术包括水平/垂直分片和分库,需应对分布式事务、跨库查询等挑战,通过中间件和解决方案实现,最佳实践为合理策略、备... 目录一、分库分表的触发条件1.1 数据量阈值1.2 并发压力二、分库分表的核心技术模块2.1 水平分