自定义属性操作

梨涡浅笑

发布于 2020-10-27 15:25:05

7790

发布于 2020-10-27 15:25:05

文章被收录于专栏：全栈自学笔记

1.自定义属性操作

1.1 获取属性值

 element.属性获取属性值。  element.getAttribute('属性');

区别： element.属性获取内置属性值（元素本身自带的属性） element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

<div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

1.2. 设置属性值

 element.属性 = ‘值’ 设置内置属性值。  element.setAttribute('属性', '值'); 区别：  element.属性设置内置属性值  element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

// 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

1.3. 移出属性

element.removeAttribute('属性');

        / class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');

1.4. H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

1. 设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值。比如 <div data-index=“1”></div> 或者使用 JS 设置 element.setAttribute(‘data-index’, 2)

2. 获取H5自定义属性 1. 兼容性获取 element.getAttribute(‘data-index’); 2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

<div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-09-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html5

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html5

登录后参与评论

0 条评论

热度