html5 — data自定义数据

最新推荐文章于 2021-08-10 02:44:30 发布
原创 最新推荐文章于 2021-08-10 02:44:30 发布 · 468 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了HTML元素中自定义数据属性dataset的使用方法及作用，通过实例展示了如何利用JavaScript获取这些自定义属性的值，并指出其在各种前端框架和库中的重要应用。

data自定义数据— dataset

dataset

data-name(属性): dataset.name（js获取）
data-name-first : dataset.nameFirst

PS：data数据在很多框架和库（如jquery mobile）中有着重要作用

<body>
<div data-name='你好' id='div1'></div>
<script>
    var oDiv=document.getElementById('div1');
    alert(oDiv.dataset.name);
</script>
</body>
HTML5中自定义数据属性(2)data-*自定义数据
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-06 1442
属性的值时，属性名中的连字符（-）将被转换为驼峰命名法（camelCase）。因此，在上面的示例中，我们使用。属性非常有用，可以用于在HTML元素上存储额外的信息，这些信息可以在JavaScript中进行访问和处理。属性是HTML5中引入的一种自定义数据属性，用于在HTML元素上嵌入自定义数据。属性，分别存储了容器中的项目限制和排序顺序。属性的值，可以使用JavaScript中的。在上面的示例中，我们在一个。在上面的示例中，我们在一个。在上面的示例中，我们在一个。在上面的示例中，我们在一个。
HTML5中自定义数据属性data-*属性(3)jq如何操作data-*
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
11-13 894
属性(3)jq如何操作data-在 jQuery 中，可以使用data()方法来获取data-*属性的值。这个方法可以读取或设置 HTML 元素上的data-*属性。如果想获取data-*在上面的代码中，需要将selector替换为你要获取data-*属性的 HTML 元素的选择器，而应该被替换为你想要获取的data-*属性的名称。例如，如果有一个像这样的 HTML 元素：
HTML5 data-* 自定义属性
weixin_34217711的博客
05-22 114
今天在做手机网站的时候，运用了HTML5 data-* 自定义属性，感觉还不错，挺方便的 具体代码： <span class="btn fr acw pay_order" data-pay="{$list.id}" data-ispay="{$list.is_pay}" data-paymethod="{$list.pay_method}">立即支付</span> ...
HTML5 data- class属性
zhanghuiyu01的博客
03-07 1635
data-* 属性是 HTML 5 的新特性，允许用户在 DOM 中存储自定义信息。 以前，需要存储含有特定含义的信息通常是通过 class 完成的，但这并不是 class 本来的用途。现在，利用 HTML 5，可以为元素添加data-属性，从而存储自定义信息。其中是可以自定义的部分。例如： &amp;lt;article id=&quot;tu&quot; data-category=&quot;Web Development&quot; d...
07-jquery中data()方法的作用
月亮不会睡
11-24 204
function printVlaue(){ //通过data()在testDiv元素上存储 {ename:zhangsan} 健/值对。 $("#testDiv").data("ename", "zhangsan"); //修改data()通过 data-* 属性存储的值 $("#testDiv").data("cname", "我是张三"); console.log( "获取通过data()存储在testDiv元素上的ename值:", $("#testDiv").da.
微信小程序往服务器传值,微信小程序页面跳转及传值
weixin_26800111的博客
08-10 727
微信小程序页面跳转及传值发布时间:2020-09-08浏览量: 896文章分类: 小程序背景：小程序首页展示了n个文章的列表，通过v-for循环后，每个标题都有自己独立的key，我这里叫先统一叫做sid，我的预期是点击这个文章的标题，就打开小程序对应的文章页面，这样就可以直接看到具体文章的内容。上面这个背景也就涉及了小程序的页面之间的传值了，也就是主页是一个模板、文章页面是一个模板，这样在主页点击...
HTML5中的data-*属性
weixin_30815427的博客
02-21 276
data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符； 属性值可以是任意字符串； 注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 与jQuery的.data()不是一个概念。 在获取自定义属性的值时，使用dataset属性，然后通过自定义属性(这时去掉data-前缀)的名称去获取值。...
详解HTML5 data-* 自定义属性
12-30
而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义...
HTML5的自定义属性data-*详细介绍和JS操作实例
09-28
HTML5的自定义属性`data-*`是一个强大的特性，它允许开发者在HTML元素中存储额外的数据，这些数据通常不会显示在页面上，但可以被JavaScript轻松访问和操作。这一特性极大地扩展了HTML5的灵活性，特别是在处理数据...
关于HTML5的data-*自定义属性的总结
12-10
结合`getAttribute()`、`setAttribute()`和`dataset`，我们可以方便地读取、设置和管理这些自定义数据，从而实现更复杂的交互和功能。在实际项目中，善用`data-*`属性可以帮助我们更好地组织和管理页面中的数据，...
HTML5中的data-*属性和jQuery中的.data()方法使用
热门推荐
fly_zxy的专栏
02-19 4万+
HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据，我们自定义的属性名字也千奇百怪，五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是HTML在向着规范化和标志前进。在HTML5标准规定，自定义的属性都已data—*开头，这样就区分开了固有属性和自定义属性。HMTL代码如下： 测试
设置获取data-*属性值
a97156000的博客
08-15 1055
html代码如下： <div id="getId" data-id="122" data-vice-id="11">获取id</div > 需要获取的就是data-id和dtat-vice-id的值 一：getAttribute()方法 const getId = document.getElementById('getId'); ...
input等的data-name、data-age HTML5 自定义属性
a281246240的专栏
01-07 1万+
data-*方式来自定义属性，data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。 div id="test" data-age="24"> div> 赋值：$('.inp').data('name','tcac');  $('.inp').data('id','0058'); 获取值：$('.inp').data('name');
HTML5 data-* 自定义属性操作及其注意点
djaaa123456的博客
01-17 1031
在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式，但取值是必需全部使用小写（后面会说），使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 1.Html绑定数据写法 1.1简单单词： <div id="testDiv" data-cd="24"&...
记一下踩过的坑（vue+django）
nzzzzzzzz的博客
06-09 211
首先是vue与django{{}}冲突：
jq给标签动态添加id_请问Jquery怎么给动态标签绑定data-**数据
weixin_39615643的博客
12-21 1181
如果把data-newsid=informationList[i].id写标签里，弹出的是informationList[i].id，没有我要的id，如果按照第二种方法，就是第二个方框，那么所有li标签绑定的都是最后一个id的值，不符合按照按照每个li依次绑定一个id？有什么方法绑定吗？function newstype(informationList){var parm = '';for(var...
关于Html5中自定义属性data-*的总结
monster1935的专栏
05-21 1万+
一、关于html元素的特性1.html元素都存在一些标准的特性： id 元素在文档中的唯一标识符 title 有关元素的附加说明信息，一般通过工具提示条显示出来 lang 元素内容的语言代码，很少使用 dir 语言的方向，很少使用 className，与元素的class特性对应，考虑到与ECMAScript的保留字class的冲突，因此命名为className 2.操作特性的方法 getAttr
html 属性是可以自定义的(解决参数获取的问题)
cominglately的博客
06-22 1105
js 里面需要参数去执行一些操作 ， 这个参数可以通过input hidden 设定数值  然后通过 jQ获取，也可以通过在触发时间的ＤＯM上自定义一个属性，通过$(this).attr(属性的名字) 来获取 ;  html button type="button" class="btn btn-primary btn-sm rebuild" data-sid="$list['sid'];
html data 协议,Data URI和MHTML完整解决所有浏览器
weixin_36322984的博客
06-04 458
Data URIData URI 是由 RFC 2397 定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中：data:[][;base64],MIME-type：指定嵌入数据的 MIME。其形式是[type]/[subtype]; parameter，比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息，更多情況下是...
使用HTML5 Canvas自定义动态柱状图
本篇文章将会详细介绍如何使用HTML5的Canvas API来实现一个简单的柱状图，并且重点强调在JavaScript中如何实现数据更新后图表的动态更新。 ### HTML5 Canvas基础 Canvas是HTML5新增的组件，它提供了一个可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值