-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-05-10
来源 ：
阅读 978
评论 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
一二三四五
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
