自定义data-*

HTML5的自定义属性data-*详细介绍和JS操作实例

< div id="user" data-id="123456" data-name="伟哥哥" data-data-of-birth>测试< /div >

使用attribute方法存取 data-* 自定义属性的值

使用getAttribute获取data-属性

        var user = document.getElementById("user");
        var userName = user.getAttribute("data-name");//userName = "伟哥哥"
        var userId = user.getAttribute("data-id");//userId = "123465"

使用setAttribute设置data-属性

        user.setAttribute("data-url","http://www.cnblogs.com/wei-hj/");

此方法能在所有的现代浏览器中正常工作，但它不是HTML 5 的自定义 data-属性被使用目的，不然和我们以前使用的自定义属性就没有什么区别了。

dataset属性存取data-*自定义属性的值

通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值， dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素data- 属性的DOMStringMap对象。

使用这种方法时，不是使用完整的属性名，如 data-uid 来存取数据，应该去掉data- 前缀。

特别注意：data- 属性名如果包含了连字符，例如：data-date-of-birth，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是： dateOfBirth 。

        var el = document.querySelector("#user");
        console.log(el.id);//user
        console.log(el.dataset);//DOMStringMap {id: "123456", name: "伟哥哥", dataOfBirth: ""}
        console.log(el.dataset.id);//123456
        console.log(el.dataset.name);//伟哥哥
        console.log(el.dataset.dataOfBirth);//没有输出东西，为空

        el.dataset.dataOfBirth = "2017-01-01";//设置data-data-of-birth的值
        console.log(el.dataset.dataOfBirth);//2017-01-01

        console.log("dataOther" in el.dataset);//false，判断是否有data-other属性在el中
        el.dataset.dataOther = "other";//设置dataOther的值
        console.log("dataOther" in el.dataset);//true，判断是否有data-other的值

        console.log("dataName" in el.dataset);//？？？？？？？不明白为什么总是显示false，有待考究

        delete el.dataset.dataOther;//删除的话会变成false
        console.log("dataOther" in el.dataset);//false

        el.dataset.dataOther = null ;//如果只是设置为空的话，依旧会返回true
        console.log("dataOther" in el.dataset);//true

新的 dataset 属性只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现，所以在此期间最好用的getAttribute和setAttribute来操作。

关于data-属性选择器

实际开发过程中，可以根据自定义的data-属性选择相关的元素，例如使用querySelectorAll选择元素：

    //选择所有包含"data-shuai"属性的元素
    document.querySelectorAll("[data-shuai]");

    选择所有包含"data-man-weigege"属性值为"shuai"的元素
    document.querySelectorAll("[data-man-weigege]='shuai'");

通过data-属性对相应的元素设置CSS样式，例如：

        <style type="text/css">
        .user{
            width:100px;
            height:200px;
        }
        .user[data-name="weigege"]{
            color:red;
        }
        .user[data-name="weigege2"]{
            color:blue;
        }
        </style>
        <div class="user" data-id="123456" data-name="weigege">哈哈</div>
        <div class="user" data-id="654321" data-name="weigege2">嘻嘻</div>