[JavaScript]_[初级]_[使用HTMLElement.dataset快速读写自定义属性]

场景

在开发前端页面时，一般会在某些元素上增加自定义的属性来存储额外的数据。比如图片元素上增加big和small属性来存储大图片和小图片，当点击某个按钮时可以通过JavaScript来控制切换大小图片。那么这些自定义的属性如何读写？

说明

文档DOM提供元素方法setAttribute和getAttribute来读取和修改属性值。这种方式在属性多的时候比较不方便，占用了比较多的代码行数。
在Chrome 8和Firefox 6以上为HTMLElement添加了一个只读属性dataset, 这个属性类型暴露了一个字符串映射DOMStringMap，它包含了以data-开头的自定义属性键值对, 比如以下的字定义属性data-url。通过使用这个特性，可以使用很少的代码对自定义属性进行读写。

命名规则

在HTML里，以data-开头;允许字母，数字，破折号(-), 下划线，冒号，并且大写字母在JavaScript使用中会转换为小写;

<div id="test" data-url="https://blog.csdn.net/infoworld" 
            data-user-name="infoworld" 
            data-download_1="https://download.csdn.net"
            data-preview.wtl="https://edu.csdn.net/course/detail/26149"
            data-preview:cpp="https://edu.csdn.net/course/detail/26558"
            data-Java="https://download.csdn.net/course/detail/37238"
            pid="39"
            >
    <a href="#" onclick="return reading();">测试 dataseta>
div>
1
2
3
4
5
6
7
8
9
10

在JavaScript里，也就是通过dataset.属性名引用的属性名是data-之后的名称。
- 对于破折号后边跟小写字母的，移除破折号，后边的小写字母转为大写，也就是通常所说的驼峰命名法.
```
console.log("name: "+div.dataset.userName);
1
```
- HTML属性里有冒号:和句号.的，只能通过方括号语法设置和读取。
```
console.log("preview.wtl: "+div.dataset['preview.wtl']);
console.log("preview:cpp: "+div.dataset['preview:cpp']);
1
2
```
- 大写转换为小写调用，所以命名的时候直接用小写避免转换。
```
console.log("Java: "+div.dataset.java);
1
```

例子

<html>
    <body>
        <div id="test" data-url="https://blog.csdn.net/infoworld" 
            data-user-name="infoworld" 
            data-download_1="https://download.csdn.net"
            data-preview.wtl="https://edu.csdn.net/course/detail/26149"
            data-preview:cpp="https://edu.csdn.net/course/detail/26558"
            data-Java="https://download.csdn.net/course/detail/37238"
            pid="39"
            >
            <a href="#" onclick="return reading();">测试 dataseta>
        div>
        
    body>
    <script>
        function reading(){
            let div = document.querySelector("#test");

            console.log("url: "+div.dataset.url);
            console.log("name: "+div.dataset.userName);
            div.dataset.userName = "Tobey";
            console.log("name: "+div.dataset.userName);

            console.log("download_1: "+div.dataset.download_1);
            console.log("download_1: "+div.dataset['download_1']);

            // 普通属性
            console.log("pid: "+div.getAttribute("pid"));
            div.setAttribute("pid",100);
            console.log("pid: "+div.getAttribute("pid"));

            // 大写字母会转换为小写调用
            console.log("Java: "+div.dataset.java);

            // 句号和冒号需要用方括号语法设置和读取。
            console.log("preview.wtl: "+div.dataset['preview.wtl']);
            console.log("preview:cpp: "+div.dataset['preview:cpp']);
        }
    script>
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
38
39
40

输出

url: https://blog.csdn.net/infoworld
dataset.html:20 name: infoworld
dataset.html:22 name: Tobey
dataset.html:24 download_1: https://download.csdn.net
dataset.html:25 download_1: https://download.csdn.net
dataset.html:28 pid: 39
dataset.html:30 pid: 100
dataset.html:33 Java: https://download.csdn.net/course/detail/37238
dataset.html:36 preview.wtl: https://edu.csdn.net/course/detail/26149
dataset.html:37 preview:cpp: https://edu.csdn.net/course/detail/26558
1
2
3
4
5
6
7
8
9
10

参考

相关阅读:
Python 教程之如何在 Python 中处理大型数据集CSV、Pickle、Parquet、Feather 和 HDF5 的比较
第十一章 GetAway服务网关详解
生产型企业如何搭建进销存管理系统？低代码平台了解一下
基于ESP32实现一个WIFI透传模块demo
技术栈业务架构插件库
MATLAB实战Sobel边缘检测(Edge Detection)
服务器数据恢复-阵列崩溃导致LVM结构破坏的数据恢复案例
ChatGPT：Java中的try-catch-finally及return语句的执行顺序解析
3万字智慧交通数字化建设方案
SAP: 建立HTTPS 连接时，报错 ICM_HTTP_SSL_PEER_CERT_UNTRUSTED

原文地址：https://blog.csdn.net/infoworld/article/details/127951288