html5里新增data-*的属性的定义和用法

最新推荐文章于 2022-06-28 17:35:48 发布
最新推荐文章于 2022-06-28 17:35:48 发布
阅读量249 收藏
点赞数
分类专栏： html 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kebis/article/details/111877214
版权 
<body>
   <div class="box" id="app" data-d="dad">1321</div>
</body>

var box = document.getElementById('app');
 box.onclick = function () {
     var animalType = box.getAttribute("data-d");
     alert(box.innerHTML+','+animalType)
}

html5里的data-*
用于存储页面或应用程序的私有定制数据。
赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验
定义的规则

  • 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
  • 属性值可以是任意字符串
kebis
关注
专栏目录
data-*的用法
海阔天空
01-07 914
data-*的用法
js data-自定义属性
handy_csdn的博客
05-17 1797
template <div class="dataCharacter" data-dataMsg="handy"> <ul> <li class="one" data-other-msg="one">1</li> <li class="two" data-other-msg="two">2</li> <li class="three" data-oter-msg="three
html中data-uri和data-href的属性有什么作用
海阔天空
08-08 8219
定义和用法 data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验 （不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前...
data-*属性
Sugarman0620的博客
09-24 466
data-*属性用于存储页面或应用程序的私有自定义数据。 data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。 存储的（自定义）数据能够被页面的javascript中利用，以创建更好的用户体验（不进行Ajax调用或服务器端数据库查询）。 data-*属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符 属性值可...
data-*
如果有了可惜
04-26 229
data-* data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换 全局属性相关 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes 与 js 之间数据交换 h...
js 获取html5的data属性实现方法
10-19
总结一下，JavaScript获取HTML5 data属性的实现方法主要有两种：通过`dataset`属性和`getAttribute()`方法。`dataset`属性是HTML5的新特性，对data属性提供了友好的访问接口，而`getAttribute()`方法则是一种通用的...
HTML 5 参考手册---HTML 5 标准属性
10-28
### HTML 5 标准属性详解 #### 一、引言 HTML5作为Web开发的基础语言之一，在网页设计与交互方面提供了丰富的特性和功能。...此外，了解每个属性的具体用法和适用场景有助于开发者更加高效地创建高质量的Web应用。
html5表单及新增的改良元素详解
09-27
HTML5在传统的HTML4.01基础上对表单功能进行了大幅度的增强和改进，使得网页开发者能够构建更强大、更具交互性的用户界面。本文将详细解析HTML5中新增的表单元素及其改良特性。 1. **form属性**： 在HTML5中，表单...
最详细的Spring-data-jpa入门（一）
热门推荐
此成非彼诚博客
08-13 10万+
刚进公司，人生地不熟，偷偷藏着本《mybatis入土为安》，以为可以靠mybatis混的轻松点，谁知天有不测风云，大家用的是JPA。我这个小白没有听说过，全英文名叫，就是java持久化api，是SUN公司推出的一套基于的规范。持久化想必如雷贯耳，都0202年了，谁还不用个持久化框架啊，举起mybatis。ORM呢？全英文名为：对象关系映射，简单来说为了不用JDBC那一套原始方法来操作数据库，ORM框架横空出世（mybatis、hibernate等等）。...
data-*属性的使用(1)data-*属性的使用
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
12-03 516
<div id="main" data-id="1" data-url="ani.html" data-index="1">data-*属性</div> <a href="dom_obj_attributes.php" target="_blank">Attr 对象</a> var a = document.getElementById("main").getAttribute("data-index"); console.log(a);
data-*属性用法
weixin_42178670的博客
06-28 948
data-*属性是全局属性，是一类被称为自定义数据属性的属性，它能让我们在所有html元素上嵌入自定义数据属性的能力，并且通过脚本在HTML和DOM之间实现专有数据交换。 如：data-*的 *可以任意命名，但必须遵循以下命名规则： 1、不能以xml开头，无论是大写还是小写 2、名称不能包含任何分号 3、不能包含A-Z大写字母方法一： 方法二： 在css中可以通过下面方法访问：...
data - * 属性的使用和获取
x578074910的博客
03-23 248
data - * 属性是HTML5中的新标签， data-* 属性用于存储页面或应用程序的私有自定义数据，也就是 data-* 自定义属性，使用方式类似于 input 标签中的 value 属性。 e.g.在 AngularJS 中使用 data-id 属性 &lt;ul ng-app=" myApp" ng-controller="ControllerDemo"&gt; &l...
H5：新增data-*属性详解
海生的博客
08-03 9903
data-*属性：自定义属性来存储数据，data-值，值可以是任意字符串。 获取值： var el = document.getElementById('div') console.log(el.getAttribute('data-created-time'))  设置值： va
HTML5 data-* 数据处理
Fimooo的博客
03-07 623
HTML5中的设置，如： &lt;body&gt; &lt;div data-num="1" onclick="es(this)"&gt;1&lt;/div&gt; &lt;div data-num="2" onclick="es(this)"&gt;2&lt;/div&gt; &lt;div data-num=&qu
html的data-*属性
hello PHP的博客
12-29 323
http://blog.csdn.net/fly_zxy/article/details/50687691
浅谈h5的新属性（data-*属性）
Tank_in_the_street的博客
10-05 8999
HTML5和上一个版本HTML4.01的最大最本质的一个区别点就在于，HTML4.01是基于SGML的，所以标签需要声明引用DTD，DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。而HTML5是不基于SGML的，所以不需要引用DTD。         在HTML4.01中，DTD有三种声明方法，分别是Strict、Transitional和Frameset。与它们三个相对应的如下：
jQ获取html5的data-*属性
彭于晏的博客
08-17 326
data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。 <div id="myDiv" data-age="123" data-name="XXX"></div> jq获取 $("#myDiv").data("age");//"123" 多"-" <tr data-tt-id="1" data-tt-parent-id="3"> $(th
【学习笔记】data-*属性的用法和DOM元素 getAttribute() 方法简单了解
weixin_43194235的博客
01-03 1481
data-* 属性是 HTML5 新增的。 data-* 属性用于存储自定义数据的， 可以结合getAttribute() 方法调用储存的数据。 data-* 属性可以在所有的 HTML 元素中嵌入数据。 data-* 属性由以下两部分组成： 1、属性名不要包含大写字母，在 data- 后必须至少有一个字符。 2、该属性可以是任何字符串 注意： 自定义属性前缀 ...
HTML5表单新属性详解：autocomplete与novalidate等
在HTML5中，表单功能得到了显著增强，引入了一些新的属性，以提高用户体验和数据验证的灵活性。这里我们将深入探讨这些新增的表单属性，包括和元素的新特性。 1. **<form> 新属性** - **autocomplete**：此属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值