当前位置：首页 > news >正文

【Web APIs】JavaScript 自定义属性操作 ② ( H5 自定义属性 )

news 2025/7/20 10:15:46

文章目录

一、H5 自定义属性
- 1、H5 自定义属性概念简介
- 2、H5 自定义属性访问方法
- 3、H5 自定义属性应用场景
二、H5 自定义属性代码示例

一、H5 自定义属性

1、H5 自定义属性概念简介

在进行前端页面开发时 , 可能需要用到一些临时数据 , 仅需要在页面中使用 , 不需要保存到后台数据库中 , 此时就可以使用 " HTML5 自定义属性 " ;

HTML5 自定义属性的目的是保存并使用一些数据 ;

HTML5 自定义属性是以 data-前缀命名的属性 , 用于存储私有数据 ;

H5 自定义属性与标准属性的区别 : 不参与 DOM 树渲染 , 仅供开发者存储额外信息 ;

H5 自定义属性命名规范 : data-* 格式 , 这是为了避免开发者将自定义属性与元素本身属性混淆而制定的规范 , 推荐使用小写和连字符 , 如 : data-user-id ;

<div data-user-id="2"></div>

注意 : H5 自定义属性容易出现歧义 , 需要判断元素属性是内置属性还是自定义属性 ;

2、H5 自定义属性访问方法

HTML5 自定义属性访问方法 : 给定如下自定义属性 data-user-id ;

<div data-user-id="2"></div>

getAttribute / setAttribute ( 推荐使用 , 不存在兼容性问题 ) : 直接操作属性名 , getAttribute 是获取 H5 自定义属性值 , setAttribute 是设置 H5 自定义属性值 ; ( 兼容性 : 任意浏览器版本都支持 )

element.getAttribute('data-user-id'); 
element.setAttribute('data-user-id', '123');

DOM API ( 由于兼容性问题不推荐使用 ) : 通过 element.dataset 对象访问 , 属性名转为驼峰式 , 如 : 访问 data-user-id 自定义属性的方法是 element.dataset.userId ; ( 兼容性 : 需要 IE11 以上才能支持 )

const element = document.getElementById('example');
console.log(element.dataset.userId); // 输出自定义属性值

3、H5 自定义属性应用场景

HTML5 自定义属性应用场景 :

动态数据绑定 : 存储与 DOM 元素关联的 JSON 或状态数据 ;
CSS 交互控制 : 通过属性选择器（ [data-*] ）触发样式变化 ;
框架集成 : 与 Vue、React 等框架的数据传递结合使用 ;

H5 自定义属性实践示例 :

动态内容加载 : 通过 data-api-url 属性绑定异步请求的URL ;
表单验证 : 利用 data-validation-rules 定义校验规则 ;
组件通信 : 在自定义 Web 组件中传递配置参数 ;

二、H5 自定义属性代码示例

在下面的代码中 , 为 <div> 标签设置 H5 自定义属性

<div data-user-id="2"></div>

通过 Element#getAttribute 获取自定义属性 data-user-id 的值 :

div.getAttribute('data-user-id')

使用 Element#setAttribute 设置自定义属性 data-user-id 的值 :

div.setAttribute('data-user-id', 3)

通过 element.dataset 对象访问 , 如果自定义属性里面有多个 - 链接的单词 , 此时采取驼峰命名法 , 访问 data-user-id 自定义属性的方法是 element.dataset.userId , dataset 是一个集合里面存放了所有以 data- 开头的 H5 自定义属性 ;

        console.log(div.dataset);console.log(div.dataset.userId);console.log(div.dataset['userId']);

完整代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>H5自定义属性</title>
</head><body><div data-user-id="2"></div><script>// 获取 div 标签元素var div = document.querySelector('div');// 使用 Element#getAttribute 获取自定义属性 data-user-id 的值 console.log(div.getAttribute('data-user-id'));console.log("设置 data-user-id 自定义属性值为 " + 3);// 使用 Element#setAttribute 设置自定义属性 data-user-id 的值 div.setAttribute('data-user-id', 3);// 验证设置的 自定义属性值console.log(div.getAttribute('data-user-id'));console.log("使用 Element#dataset 获取 H5 自定义属性");// 通过 element.dataset 对象访问 // 如果自定义属性里面有多个 - 链接的单词 , 此时采取 驼峰命名法// 访问 data-user-id 自定义属性的方法是 element.dataset.userId// dataset 是一个集合里面存放了所有以 data- 开头的 H5 自定义属性console.log(div.dataset);console.log(div.dataset.userId);console.log(div.dataset['userId']);</script>
</body></html>