自定义数据属性中大小写

最新推荐文章于 2022-06-25 15:25:47 发布

Fengine

最新推荐文章于 2022-06-25 15:25:47 发布

阅读量968

点赞数

分类专栏： js error 文章标签： js

本文链接：https://blog.csdn.net/Fengine/article/details/79779318

版权

js error 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。添加完自定义属性后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀（而且我在Chrome中还发现如果后面跟着大写字母会同意转成小写，再用大写去访问会出现undefined）

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <div id="myDiv" data-appId="123456" data-MYNAME="hange"></div>
    <script>
        var div = document.getElementById("myDiv");
        var appId = div.dataset.appid;
        var myname = div.dataset.myname;
        alert(appId);//appId 居然是undefined
        alert(myname);//输出为hangge
        div.dataset.appId = "234567";
        div.dataset.myname = "miaoch";
        if (div.dataset.myname) {
            alert(div.dataset.myname);//xiaoch
            alert(div.dataset.appid);//123456
        }
    </script>
</body>
</html>