标签：html5 data- dataset queryselector queryselectorall
HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。目前采取这样的做法的框架也有很多，最常见的当属jQueryMobile。<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共同学习！ 标签：html5 data- dataset queryselector queryselectorall
原文地址：http://blog.csdn.net/xmtblog/article/details/46678949
