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

今天就跟大家聊聊有关HTML5中的data-*属性该如何使用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都网站设计、三穗网络推广、小程序开发、三穗网络营销、三穗企业策划、三穗品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供三穗建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

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

HTML中新增了许多新的属性，今天将要介绍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中的data-*属性该如何使用有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

本文名称：HTML5中的data-*属性该如何使用
文章分享：https://www.cdcxhl.com/article18/pgejdp.html

成都网站建设公司_创新互联，为您提供域名注册、网页设计公司、全网营销推广、ChatGPT、建站公司、手机网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容