欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

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

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

HTML5中的data-属性主要用于存储页面中的私有自定义数据,目的是为了创建更好的用户体验

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

【推荐课程:HTML5课程

data-自定义数据

data-* 属性的含义

data-* 属性用于存储页面或应用程序的私有自定义数据是所有HTML元素上自定义data属性,它存储的数据能够被JavaScript所利用,可以创建更好的用户体验。

data-* 属性包含两个部分分别为:

属性名:在属性名中不能包含任何大写字母,而且在前缀“data-”之后必须有一个字符,不能为空。

属性值:属性值可以是任何字符串。

<element data-*="somevalue">


data-animal-type="动物类"

如何使用data-*属性

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

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

例:

<!DOCTYPE Html>
<Html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
width:50px;
height:50px;
background-color: pink;
text-align: center;
margin-left: 10px;
line-height: 50px;
float:left;
}
</style>
</head>
<body>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
<p>点击li时显示其类别</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="动物类">小猫咪</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="水果类">苹果</li>  
</ul>

</body>
</Html>

效果图:

点击之前

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

点击之后

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

注意

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

总结:以上就是本篇文章的全部内容了,希望对大家学习HTML5有所帮助。 本文地址:http://itbyc.com/web/html5/19822.html
转载请注明出处。

分享是一种快乐,也是一种美德:

上一篇:url是什么意思

下一篇:如何打开HTML文件

博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1