<div id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></div>在传统的做法中我们可以配合jquery使用，如下：
$("#head").attr("data-home");
$("#head").attr("data-home","new");或者纯js做法：document.getElementById("head").["data-home"];
document.getElementById("head").["data-home"] = "new";在火狐和谷歌浏览器里，我们可以通过getAttribute方法来实现调用：document.getElementById("head").getAttribute("data-home");
document.getElementById("head").setAttribute("data-home","new");再HTML5中的简洁操作方法：（dataset属性存取data-*自定义属性的值）<div id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群：135430763</div> <script type="text/javascript"> var el = document.querySelector(‘#head‘); console.log(el.id); console.log(el.dataset);//一个DOMStringMap console.log(el.dataset.home); console.log(el.dataset.author); console.log(el.dataset.dateOfBirth); el.dataset.dateOfBirth = ‘1985-01-05‘; // 设置data-date-of-birth的值. //判断属性 console.log(‘testAttr‘ in el.dataset);//false el.dataset.testAttr = ‘testAttr‘; console.log(‘testAttr‘ in el.dataset);//true </script>如果你想删掉一个 data-属性 ，可以这么做： delete el.dataset.home ; 或者 el.dataset.home = null;。
<style type ="text/css">
.head {
width : 256px ;
height : 200px ;
}
.head[data-a=‘btn-a‘] {
color : brown
}
.head[data-a=‘btn-color‘] {
color : red
}
</style>
<div class = "head" data-qq = "QQ群：135430763" data-a = "btn-a" > button按钮 </div>
<div class = "head" data-qq = "QQ群：135430763" data-a = "btn-color" > button按钮</div>欢迎大家关注我的博客！如有疑问,请加QQ群：135430763共同学习！ 原文：http://blog.csdn.net/xmtblog/article/details/46678949