html5里面的data属性的作用是什么-前端问答-PHP中文网

html5里面的data属性的作用是什么

WBOY

发布： 2022-06-20 10:44:47

原创

4758人浏览过

html5里面的data属性的作用是存储私有页面后应用的自定义数据，“data-*”是HTML5新增的一个自定义数据属性功能，作为可以暂存数据使用，自定义的数据可以让页面拥有更好的交互体验；该属性的属性名不能包含大写的字母，在“data-”后面至少有一个字符。

html5里面的data属性的作用是什么

本教程操作环境：windows10系统、HTML5版本、Dell G3电脑。

html5里面的data属性的作用是什么

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

立即学习“前端免费学习笔记（深入）”；

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串

PHP开发实用指南 2.0
对于一个刚进入PHP 开发大门的程序员，最需要的就是一本实用的开发参考书，而不仅仅是各种快速入门的only hello wold。在开发的时候，也要注意到许多技巧和一些“潜规则”。PHP是一门很简单的脚本语言，但是用好它，也要下功夫的。同时，由于PHP 的特性，我一再强调，最NB 的PHP 程序员都不是搞PHP 的。为什么呢？因为PHP 作为一种胶水语言，用于粘合后端数据库和前端页面，更多需

387

查看详情

data-*是HTML5新增的一个自定义数据属性功能，作为可以暂存数据使用。利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

语法为：

<element data-*="somevalue">

登录后复制

somevalue 指定属性值 (一个字符串)

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</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>

登录后复制

输出结果：

+2.gif