更新时间:2014年9月2日

data-*属性(自定义属性)【新属性

data-*="任意值"

HTML5之前的HTML不能使用自定义的属性。但是,要在特殊网页需要使用特定脚本语言,例如如果能够在HTML一侧指定参数,就会变得非常方便。

出于以上考虑,HTML5增加了用户能够自定义内容属性。

自定义内容属性的名字开头必须是data-,后面为自定义部分,最少一个文字,且只能是小写字母、连接符、下划线等,这些能够使用在XML属性上的使用文字,不允许使用大写字母和分号。

使用例

<a href="http://www.webkkl.com" id="site" data-preview="1"

data-preview-size="2">HTML5知识网</a>

浏览器上的显示结果↓

HTML5中规定了使用JavaScript提取该自定义内容属性的方法。即:使用规定的dataset IDL属性提取封装了自定义属性值的DOMStringMap对象。

下例中,只要指定除掉data-后的名称,就能提取该当自定义属性的值。需要注意的是,当后面的名称里含有连接符,如属性的名称为data-preview-size时,dataset对象的属性为previewSize。

dataset IDL属性的使用例

var a=document.getElementById("mysite");

var preview=a.dataset.preview;

var size=a.dataset.previewSize;

浏览器支持情况

IE11IE10Fx4.0Fx3.6Chrome11Safari6.1Opera23
X