dataset和setAttribute

doiido

于 2023-11-20 18:53:48 发布

阅读量201

点赞数 4

分类专栏：前端开发文章标签：前端 html5

本文链接：https://blog.csdn.net/doiido/article/details/134515879

版权

前端开发专栏收录该内容

62 篇文章 1 订阅

订阅专栏

在项目开发中经常在js中使用setAttribute来设置自定义属性，最近发现dataSet用法跟setAttribute相似，下面来具体学习下他们的区别。

1、dataSet【自定义数据属性】

（1）HTMLElement.dataset 属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-)集。
（2）所谓的data-实际上就是data-前缀加上自定义属性名；但是在获取或者添加自定义属性的时候要去掉前缀data-;

2、getAttribute和setAttribute

setAttribute() 方法为一个或一组元素添加指定的属性，并且为其赋指定的值。（主要针对自定义属性）

如果这个属性已经存在，仅仅设置或是修改属性值。

getAttribute() 方法返回元素上一个指定的属性值。

如果指定的属性值不存在，就返回 null 或是 ""（空字符串）。

3、getAttribute和setAttribute及dataset的区别？

1、共同点：dataset和setAttribute一样都是可以自定义属性，但dataset是偏向自定义的数据集的,可以类似于地址信息这些，就是说dataset是setAttribute一个子集，是更为确切一部分信息的集合。

2、不同点：命名上不同，dataset内只有带data-前缀的属性；

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义属性</title>
    <style>
        [data-set-css]{
            background-color: #33CCFF;
            width: 200px;height: 200px;
        }
    </style>
</head>
<body>
    <!--data-index  data-spm   第一中设置自定义的方法 直接在元素便签上书写-->
    <div id="divName" data-uname="xiaoxiao" data-zhuiMeng="追梦" data-je-ffrey="jeffrey">点击我</div>
    <script>
        //获取divName
        var el = document.getElementById("divName");
        console.log(el.dataset);
        //添加一个自定义属性
        el.dataset.sex="女"
        //el.dataset.data-usex="cs" 错误写法
        //获取数据
        console.log('data-uanme',el.dataset.uname);
        //区分大小写 只识别小写
        console.log('data-zhuiMeng',el.dataset.zhuimeng);
        //连着的字符需要转换为驼峰命名
        console.log('data-je-ffrey',el.dataset.jeFfrey);

        el.dataset.setCss = "设置css样式";
        console.log('setCss',el.dataset['set-css']);
        //删除数据
        delete el.dataset.uname
        delete el.dataset['setCss']

        el.setAttribute('age','18');
        el.setAttribute('data-age','118');

        //getAttribute取值
        console.log(el.getAttribute('age'));
        console.log('data-age',el.getAttribute('data-age'));
        console.log('data-age',el.getAttribute('data.sex'));
    </script>
</body>