如何使用HTML5中的data-*属性

HTML中新增了许多新的属性，今天将要介绍HTML5中的data-* 属性，希望对大家有所帮助。

【推荐课程：HTML5课程】

data-animal-type="动物类"

如何使用data-*属性

由于自定义数据属性是有效的HTML 5，因此可以在支持HTML 5文档类型的任何浏览器中使用它们：

我们可以设置存储在Javascript动画中可能需要的元素的初始高度或不透明度，也可设置通过Javascript加载的Flash影片的参数以及存储自定义网络分析标记数据等等。

例：

点击li时显示其类别


  
小猫咪
  
苹果
  

效果图：

点击之前

数据属性虽然灵活，但是数据属性并不适用于所有问题比如存在更适合存储数据的现有属性或元素，则不应使用数据属性。例如，日期/时间数据应该以语义方式显示，而不是存储在自定义数据属性中，不应该将特定的数据属性与任何样式的CSS相联系。另外随着数据属性的使用越来越广泛，命名约定中的冲突可能会变得越来越大，所以在命名时要注意尽量避免与插件或者公共属性名混淆

总结：以上就是本篇文章的全部内容了，希望对大家学习HTML5有所帮助。

以上就是如何使用HTML5中的data-*属性的详细内容，更多请关注 第一PHP社区 其它相关文章！