JavaScript-自定义属性

    <div id="demo" data-index="12fw" data-time="20" data-list-name="andy"></div>

    <script>

        var div = document.querySelector("div");

        console.log(div.id);

        // 元素.getAttribute("属性")，获取属性值

HTMLElement.dataset - Web APIs | MDN

补充方法（获取data-自定义属性）

如自定义属性名为data-type

element.dataset.type 获取

        console.log(div.getAttribute("id"));

        // console.log(div.data - index); //无法获取自定义属性值

        console.log(div.getAttribute("data-index"));

        div.id = "test"; //主要针对元素自带的属性

        // 元素.setAttribute("属性","值")，主要针对自定义属性，设置属性值,任何非字符串的值都会被自动转换为字符串

        // 要设置布尔属性的值（例如禁用），可以指定任何值。建议使用空字符串或属性名称。该属性的缺失表示其值是false。

        div.setAttribute("data-index", "fsv");

        console.log(typeof div.getAttribute("data-index"));

        console.log(div.getAttribute("data-index"));

        // 元素.removeAttribute("属性")，移除属性

        // 书写规范：H5规定自定义属性以data-开头作为属性名并赋值

        // H5新增的获取自定义属性的方法:（只能获取data-开头的）（兼容性差，IE11才支持）

        console.log(div.dataset.index);

        console.log(div.dataset["index"]);

        // 如果自定义属性里有多个-连接的单词，获取时需采用驼峰命名法

        console.log(div.dataset.listName);

        console.log(div.dataset["listName"]);

        // dataset是一个集合，存放了所有以data-开头的自定义属性

        console.log(div.dataset);

    </script>