html5--自定义属性

一、添加属性（第一种不能html结构上看到）

1.直接添加，通过querySelector获取到html元素之后，直接.属性进行初始化就可以为元素添加自定义属性了。

    <div>
        123
    </div>
    <script>
        var odiv=document.querySelector('div');
        odiv.index=1;
    </script>

2.setAttribute('属性名','属性值')，添加自定义属性并初始化

    <div>
        123
    </div>
    <script>
        var odiv=document.querySelector('div');
        // odiv.index=1;
        odiv.setAttribute('index','1');
    </script>

3.dataset.属性名=属性值 ，添加自定义属性并初始化；（和第四种相似，添加到标签上）

        odiv.dataset.name=22;

4.在变迁上通过data-自定义属性的方法设置

    <div data-ti="te">
        123
    </div>

二、获取属性

1、直接添加的属性可以通过直接引用出来

        odiv.index=1;
        console.log(odiv.index);  

2.通过setAttribute方法的需要通过getAttribute方法调用出来

             odiv.setAttribute('age','zs');
             console.log(odiv.getAttribute('age'));

3.通过dateset方法添加的属性，通过dateser.属性名获取

        odiv.dataset.name=22;
        console.log(odiv.dataset.name);

4.在标签上通过data-设置的方法和dateset添加的属性获取属性的方式一样，但是要有一点需要注意。当我们设置属性名的时候如果出现多个字符串即像下边data-set-input这种情况的话，在调用属性的时候需要用驼峰命名。

    <div data-ti="te" data-set-input="input">
        123
    </div>

        console.log(odiv.dataset.setInput);

 一般用在图片懒加载