HTML5属性中的data-*属性使用方法

更新时间:2019-10-09 16:22:54 来源:青锋建站 作者:青锋建站
  HTML5标签中的data-*属于用于在HTML页面存在数据,操作相应的元素,以往使用JS来操作HTML标签通过ID来进行,现在通过data-*也来可以用来操作元素。以下是青锋建站给大家分享的HTML5属性中的data-*属性使用方法。

使用data-*属性去嵌入用户自定义数据

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li> 
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li> 
</ul>

</body>
</html>

data属性的定义和使用

 HTML5中的data-*属性用于存储用于当前页面或应用的用户自定义私有数据,使得我们拥有在HTML元素中嵌入自定义数据的能力,自定义数据能够被用于JS页面去创建吸引人的用户体验而使用ajax或数据库查询。
data-*包含两部分:
第一部分是属性名,且属性名不应该包括大写字母,在"data-"前缀之后必须是至少一个字符长度。
第二部分是属性值,可以是任意字母。

Note: 带有"data-"自定义前缀的的属性将会被浏览器忽略。

浏览器支持

下图中列出的浏览器的第一个版本可以完整支持data-*属性。
html5中的data属性使用
  以下就是青锋建站给大家总结的HTML5中data-*属性的使用方法。青锋建站,提供专业的高品质网站制作服务,包括H5网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。

转载请注明来源网址:青锋建站-http://www.sjzphp.com/webdis/html-data.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有