HTML5 data- 属性
2011-11-08 10:29
113 查看
Resig在2008年在其博客中介绍过HTML5的data-属性,现如今HTML5在如火如荼地推广,似乎国内的技术有些延迟,这篇博文可以在这里找到。
data-为前端开发者提供自定义任意属性到html标签中,只要添加的属性名有“data-”前缀。,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性,lightbox库推广了rel属性,HTML5提供了data-做替代,这样可以更好地使用自定义的属性。
上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。
需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。
并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持。
jquery_mobile中大量的使用了此特性
data-为前端开发者提供自定义任意属性到html标签中,只要添加的属性名有“data-”前缀。,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性,lightbox库推广了rel属性,HTML5提供了data-做替代,这样可以更好地使用自定义的属性。
<div data-author="david" data-time="2011-06-20" data-comment-num="10" data-category="javascript"> .... </div>
上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。
var post = document.getElementsByTagName('div')[0]; post.dataset; // DOMStringMap post.dataset.commentNum; // 10
需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。
并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持。
jquery_mobile中大量的使用了此特性
相关文章推荐
- 【HTML5】'data-'属性简单记录
- js,jQuery获取html5的data-*属性
- HTML5的自定义属性data-*详细介绍和JS操作实例
- HTML5 自定义属性 data-* 和 jQuery.data 详解
- HTML5中 data-*属性的实际用途
- 浅析Html5 data-*自定义属性
- HTML5新特性data_*自定义属性使用
- HTML5 data-* 自定义属性
- html5的自定义data-*属性和jquery的data()方法的使用示例
- HTML5 [data-]属性——使用HTML标签的data属性初始化JS组件
- html5的自定义data-*属性和jquery的data()方法的使用示例
- HTML5的自定义属性data-*详细介绍和JS操作实例
- 【HTML5】'data-'属性的作用是什么?
- HTML5的自定义属性data-*详细介绍和JS操作实例
- HTML5中的data-*自定义属性
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- html5新特性data_*自定义属性使用
- HTML5新特性:自定义数据属性data-*
- html5的自定义data-*属性和jquery的data()方法的使用示例-属性-data-方法
- HTML5 自定义属性 data-* 和 jQuery.data 详解