Html 5中自定义data-*特性
html 5中支持用户自定义的data-*特性，它们在ui是不可见的。例如data-length,它可以附加在input的标签上。更加具体信息可参考w3c html 5 data-说明书http://www.w3.org/tr/2012/wd-html5-20120329/global-attributes.html#attr-data
有这么一段描述:
custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
接下来我们就可以实现这样一个简单例子:
<!doctype html>
<html>
<head>
<title>html5 custom data attribute test</title>
</head>
<body >
<li class="user" data-name="peter liu" data-city="shanghai"
data-lang="csharp" data-food="apple">
<b>peter says:</b> <span>hello, how are you?</span>
</li>
<script type="text/javascript">
var user = document.getelementsbytagname("li")[0];
var pos = 0, span = user.getelementsbytagname("span")[0];
var phrases = [
{ name: "city", prefix: "i am from " },
{ name: "food", prefix: "i like to eat " },
{ name: "lang", prefix: "i like to program in " }
];
user.addeventlistener("click", function () {
var phrase = phrases[pos++];
// use the .dataset property
span.innerhtml = phrase.prefix + user.dataset[phrase.name];
}, false);
</script>
</body>
</html>
上面的li标签中嵌入一些data-*特性，当你点击那个span，读取了每个data-*的value, 最后实现一个切换文字效果。你有注意到上面js中有用到一个dataset属性。w3c官方也是有关于dataset的介绍。上面的代码测试通过在 firefox 11.0, chrome 18.0.1025.151
注意这个在ie9是不支持的。 ie9 需要改写为getattribute
<!doctype html>
<html>
<head>
<title>html5 custom data attribute test</title>
</head>
<body >
<li class="user" data-name="peter liu" data-city="shanghai"
data-lang="csharp" data-food="apple">
<b>peter says:</b> <span>hello, how are you?</span>
</li>
<script type="text/javascript">
var user = document.getelementsbytagname("li")[0];
var pos = 0, span = user.getelementsbytagname("span")[0];
var phrases = [
{ name: "city", prefix: "i am from " },
{ name: "food", prefix: "i like to eat " },
{ name: "lang", prefix: "i like to program in " }
];
user.addeventlistener("click", function () {
var phrase = phrases[pos++];
// use the .dataset property
span.innerhtml = phrase.prefix + user.getattribute('data-'+phrase.name);
}, false);
</script>
</body>
</html>
上面的代码在ie 9.0.8112测试通过。您也可以在ie, ff中单步调试js看其中结果
希望对您web开发有帮助。
作者：petter liu
上一篇： 画布旋转——HTML5之特效
下一篇： 猕猴桃几月份成熟，又有哪些品种呢？
推荐阅读
-
html5的自定义data-*属性与jquery的data()方法的使用
-
Html 5中自定义data-*特性
-
HTML5的自定义data-*实现图片切换或者轮播（代码实例）
-
HTML5中custom data-*特性与asp.net mvc 3 表单验证
-
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
-
jQuery中使用data()方法读取HTML5自定义属性data-*实例
-
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
-
Html5之自定义属性(data-,dataset)
-
详解HTML5 data-* 自定义属性
-
Html 5中自定义data-*特性