快速了解HTML5自定义属性:data-*
沉沙 2018-05-10 来源 : 阅读 106 评论 1

摘要:HTML5添加了data-的方式来自定义属性,其中为自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决HTML5自定义属性混乱无管理的现状。

HTML5添加了data-的方式来自定义属性,其中为自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

 

小例子

<!DOCTYPE html><html><head><script>function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  
    alert(animal.innerHTML + "是一种" + animalType + "。\n 另一种方法获取的类型:"+animal.dataset.animalType+"。");
}</script></head><body>
<h1>物种</h1>
<p>点击某个物种来查看其类别:</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  </ul>
</body></html>

 

兼容情况

data-*的浏览器兼容性情况十分不乐观

Internet Explorer 11+
Chrome 8+
Firefox 6.0+
Opera 11.10+
Safari 6+


本文由职坐标整理发布,更多的H5知识尽在职坐标Web前端HTML5/CSS3频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 0
看完这篇文章有何感觉?已经有2人表态,100%的人喜欢 快给朋友分享吧~
评论(1)
后参与评论
一二三四五
very good!
2018/05/10 17:31:21
X
免费获取海同IT培训资料
验证码手机号,获得海同独家IT培训资料
获取验证码
提交

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号