大佬教程收集整理的这篇文章主要介绍了HTML5的data-*自定义属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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-*自定义属性全部内容,希望文章能够帮你解决HTML5的data-*自定义属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。