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

Posted 2023-01-09 infoworld

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JavaScript]_[初级]_[使用HTMLElement.dataset快速读写自定义属性]相关的知识，希望对你有一定的参考价值。

场景

在开发前端页面时，一般会在某些元素上增加自定义的属性来存储额外的数据。比如图片元素<img>上增加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();">测试 dataset</a>
</div>

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

例子

<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();">测试 dataset</a>
        </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>

输出

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

参考

以上是关于[JavaScript]_[初级]_[使用HTMLElement.dataset快速读写自定义属性]的主要内容，如果未能解决你的问题，请参考以下文章

[JavaWeb]_[初级]_[对Html特殊符号进行转义防止XSS攻击和反转义]

[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]

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