怎样运用HTML5中的data-*属性-百分百源码网

怎样运用HTML5中的data-*属性

发布时间：09/01 来源：未知浏览：关键词：

HTML5中的data-属性主要用于储备页面中的私有自定义数据，目的是为了创立更好的会员体验

HTML中新增了很多新的属性，今天将要介绍HTML5中的data-* 属性，但愿对大家有所帮忙。

【引荐课程：HTML5课程】

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="水果类">iphone</li>  
</ul>

</body>
</html>

结果图：

点击此前

点击之后

留意

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

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

以上就是怎样使用HTML5中的data-*属性的具体内容，更多请关注百分百源码网其它相关文章！

打赏