H5对自定义属性的规定和添加获取自定义属性的方法

元素属性那么多，如何区分是自带的属性还是默认的属性呢？H5规定自带的属性有个data- 前缀，如data-index="1"，那么,如何设置和获取属性值呢,请看下文。

<script>
        var divele = document.querySelector("div");
        //我们常用的添加和获取自定义属性
        divele.setAttribute("flag", 1);
        console.log(divele.getAttribute("flag"));

        //属性那么多，如何区分是自带的属性还是默认的属性呢？
        //H5规定自带的属性有个data- 前缀，如data-index="1"
        divele.setAttribute("data-index", 1);
        console.log(divele.getAttribute("data-index")); //兼容性比较好
        //H5新增的获取属性值得方法,元素对象.dataset.index， dataset是个自定义属性（规范的data-开头）的集合
        console.log(divele.dataset.index);
        //divele.dataset[`index`]   获取对象属性的第二种方式
        console.log(divele.dataset[`index`]);

        //问题来了,如果自定义属性被很多连接符拼接而成呢？
        divele.setAttribute("data-temp-name", 2);
        //获取的时候用驼峰法
        console.log(divele.getAttribute("data-temp-name")); //这种方式正常写
        console.log(divele.dataset.tempName);
        console.log(divele.dataset[`tempName`]);
</script>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4905