Html5 DataSet

最新推荐文章于 2024-04-22 10:57:48 发布
最新推荐文章于 2024-04-22 10:57:48 发布
阅读量447 收藏 1
点赞数
https://github.com/gztrljh
本文链接：https://blog.csdn.net/ljh101/article/details/108909421
版权

Html5 DataSet

一.简单介绍

新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。微信小程序有用这个玩意，方便传值，data-属性是允许js动态修改的
也可以允许 CSS选择器进行样式设置
地址：dataset学习地址

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset

二.简单示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
    </div>

</body>
<script>
    var el = document.querySelector('#user');
    let id = el.id
    let dataid = el.dataset.id
    let datauser = el.dataset.user

    console.log(id);
    console.log(dataid);
    console.log(datauser);



    console.log('数据类型:' + typeof el.dataset.dateOfBirth, '数据:' + el.dataset.dateOfBirth);



    //逻辑运算符说明：
    //|| 或的关系，如果前面的值等于false就会自动执行第二个值
    // && 且的关系，如果前面的值等于true就会自动执行第二个值
    console.log(isEmpty(el.dataset.dateOfBirth)
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
12-30
HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 <div id=box data-name='ghostwu' data-age='22' data-sex='man'>ghostwu tell you how to learn html5</div> [removed] var oBox = document.querySelector(#box
HTML5自定义属性对象Dataset简介
weixin_33686714的博客
08-24 362
一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： &lt;a href="javascript:" data-id="2312"&gt;测试&lt;/a...
html5自定义属性--------Dataset
最新发布
柑橘乌云_
04-22 594
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。
HTML5之Dataset
Hanhanyoona的博客
07-17 1003
在开发过程中，我们经常会用到元素的自定义属性data-**，在操作自定义属性的时候，可以通过JS的getAttribute()、setAttribute()；JQ的attr()或者data()。 HTML5提供了dataset API，可以更方便的获取元素所有的自定义属性。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
dataset html5,HTML5的dataset属性
weixin_31569663的博客
06-19 227
上个月一直再做前端的东西，接触到了data-*这个东西。其实以前也在Bootstrap的代码里看到过，以为是Bootstrap的标准，没在意。现在才发现这是html5的标准，浏览器得支持html5才能使用，所以IE9以下的都跪了。(其实，同样是老版本，Chrome，firefox什么的都有老版本，但没有人说有问题，因为都能版本更新，但奇葩的IE，IE6，IE8，IE9等等这些都像是不同的产品一样，...
浅析html5的dataset
Focus-Fe
12-12 149
  前言：   很多时候，我们在操作页面某些元素的时候，需要存储一些数据，一般大家很常见的方式都会设置一些自定义属性，比如：   微博feed list里面的图片放大：     大家看到有一个自定义的key------action-data，里面存储了一些数据。     那问题来了：   自定义属性命名有没有规范或者标准？？ 获取自定义属性的值咋搞...
Html5之自定义属性(data-,dataset)
01-19
定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 <div id=box1 data-name=Musk></div> <div id=box2 data-full-name=Elon></div> 获取 使用H5自定义属性对象...box2.dataset.fullName // Elon
CoFly-dataset
03-16
数据集说明 CoFly数据集（〜436MB）由201张航拍图像组成，可捕获干扰行作物（棉花）... 无人机的飞行高度和速度分别等于5m和3m / s，旨在提供杂草实例的近距离和清晰视野。 可视化 CoFly数据集的示例。 （a）RGB图像。
html5鼠标右键菜单点击文字提示代码
11-24
HTML5是一种先进的网页标准，它在原有的HTML基础上增加了许多新的特性和功能，使得网页开发更加高效、强大且具有交互性。在HTML5中，我们可以通过JavaScript来实现自定义的鼠标右键菜单，以提供更个性化的用户体验。...
HTML5中的dataset自定义属性.pdf
07-11
其中，`dataset` 自定义属性是 HTML5 为了满足开发者在页面元素中存储非展示性数据需求而引入的一个关键特性。这个属性允许开发人员在 HTML 元素上定义自己的数据属性，这些属性的名称以 "data-" 开头，后面可以跟...
HTML5 新特性 dataset
alokka的博客
03-31 1644
在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。 <div data-id="test">test</div> 这里的data-前缀就被称为data属性 ;我们可以通过dataset来获取data属性。下面是两个例子： 例1： <body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" data-i
html中的dataset属性
nnni
08-27 3967
一、引 在写微信小程序的时候，注意到一个写法 .wxss <view wx:for='{{list}}' data-index='key' @bindtap='click'> .js click: function(e){ index = e.target.dataset.index } 在标签中 data-* 属性都会被几种存储在DOM的 dataset 属性中，然后取值就是 ...
HTML5中的数据集dataset和自定义属性data-*
Wang的专栏
04-24 4910
在html5中可为所有元素添加一种自定义的属性，这种属性的前缀以data-开头，比如：data-name,目的是为元素提供与页面渲染无关，但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。dataset与getAttribute/setAttribute的对比 在此之前的访问属性的方式我们用getAttribute/setAttributehtml 结构：
HTML dataset 的用途?( HTMLElement.dataset)
wyk760629476的专栏
04-26 584
HTML5规定,可以给元素添加非标准的属性,就是提供与渲染无关,或者提供语义信息的属性,可以随意添加,任意命名 添加属性必须以data-做前缀 使用时候直接用元素的dataset属性,即可获取对应的属性值 使用驼峰命名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> &l
HTML5新特性dataset的使用方法
EmotionComputer
10-21 2741
这篇文章主要介绍了HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性),需要的朋友可以参考下: HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 <!DOCTYPE html> <html lang="en"> <head> &.
HTML5新特性之dataset实例
热门推荐
wonderful_life_mrchi的博客
04-01 1万+
HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。当然，任何的标签元素里面可以随意的加上任何自定义属性，也可以获取他们的值，但没有这个来的灵活。我们先来看一下随意的属性存
html dataset
05-12
HTML dataset 属性是一个 DOMStringMap 对象，它允许在HTML元素上存储自定义数据属性。这些自定义数据属性可以在 JavaScript 中通过 dataset 对象访问。例如，在以下 HTML 元素中定义了一个名为 "fullname" 的自定义数据属性： ```html <div id="my-element" data-fullname="John Doe"></div> ``` 通过以下 JavaScript 代码，可以访问该元素的 dataset 属性，并获取 fullname 属性的值： ```javascript const myElement = document.querySelector('#my-element'); const fullname = myElement.dataset.fullname; console.log(fullname); // 输出 "John Doe" ``` 可以通过 dataset 对象设置自定义数据属性的值，例如： ```javascript myElement.dataset.fullname = 'Jane Doe'; ``` 这将更新元素的 fullname 属性的值为 "Jane Doe"。注意，dataset 属性只能用于读写 HTML 元素上的自定义数据属性，不能用于读写其他属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值