HTML5中的dataset自定义属性
本文档节选自唐俊开著《HTML5 移动 Web 开发指南》,电子工业出版社
摘 要:HTML5 引入了一 项 新 的特性 : 自定义元 素 属 性 dataset+该属 性是
HTML5 标准规范的一项新特性,其格式要求属性名的前缀必须带有“data-”字符,
“data-”后面允许使用任何值,它允许开发人员将这类属性添加到 HTML 标签元
素中+
关键词: HTML5,dataset
过去,开发者在开发 Web 应用程序的时候,经常需要将有意义的数据存放在 HTML 的
内容区域中,但这些数据并不是用于给用户浏览的,而是用于表示该内容区域的额外属性或
提供脚本处理逻辑的+对于这种需求,开发者通常都使用 id、class 等属性作为数据的存储方
案+
现在,HTML5 引入了一项新的特性:自定义元素属性 dataset+该属性是 HTML5 标准规
范的一项新特性,其格式要求属性名的前缀必须带有“data-”字符,“data-”后面允许使用任
何值,它允许开发人员将这类属性添加到 HTML 标签元素中+例如下面代码为自定义属性的
简单示例:
<div id=”title” class=”title” data-category=”前端技术” data-title=“HTML5 移动开发”
data-time=“2007-2-18” data-author=“Tom”>
</div>
实际上,自定义属性只是充当元素的私有数据存储区域,它既不会影响元素的原有功能,
也不会影响其页面的布局+
由于并不是所有的浏览器都支持 dataset 属性,因此当在 JavaScript 中使用自定义属性时,
应该先检测浏览器是否支持 dataset 属性+例如:
通过 dataset 属性检测后,如果需要在 JavaScript 中使用元素的自定义属性,可以通过以
下方式读取 datasct 属性值
alert(title.dataset.category); //前端技术
alert(title.dataset..author); //Tom
目前 dataset 自定义属性只有 Chrome 浏览器和 Opera 浏览器支持+至于其他浏览器如
Firefox、IE、Safari 等桌面浏览器,仍然未支持+
1 / 2
HTML5 中的 dataset 自定义属性