自定义属性前缀data-及dataset的使用方法(不过在工作中没用到过,有用到过可以评论一下)

最新推荐文章于 2022-09-18 22:26:31 发布
最新推荐文章于 2022-09-18 22:26:31 发布
阅读量147 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45465689/article/details/109285251
版权 
<div data-abc="nihao"> // 自定义data属性 
//dataset.abc 获取值为 nihao 
// div[data-abc="nihao"] 改变元素样式
test45656
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript修炼之路-筑基篇（九）获取和修改元素属性值
weixin_59598992的博客
01-08 550
<div id="demo" index-data = "1"></div> <script> var div = document.querySelector('div'); //1.获取元素属性值 //（1）element.属性 console.log(div.id);//输出demo //（2）element.getAttribute('属性'); 一般用以获取自...
H5 自定义属性 data- 前缀
zyhzyh1120的博客
09-20 390
H5 自定义属性 data- 前缀 方式一 <!-- 在很早以前,自定义的属性要通过 user-defined-attribute 的方式来设置自己需要的属性 --> <!-- 设置 --> <h1 user-defined-attribute='xiaozhu'> 渣渣辉 </h1> // 获取 var name = document.getElementsByTagName("h1")[0].getAttribute("user-define
设置自定义属性：setAttribute、获取自定义属性两种方法：getAttribute(‘data-index‘),div.dataset[‘index‘] / div.dataset.index
*
01-01 1531
<div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribut...
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
H5自定义属性的获取方式以及dataset
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
09-18 616
H5自定义属性的获取方式以及dataset
JS（3）
weixin_46340162的博客
03-11 227
DOM初级
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
12-30
这些属性可以任意添加、随便命名，只要以 data- 开头即可添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 <div id=box data-name='ghostwu' data-age='22' data-sex='man'>ghostwu tell ...
Html5之自定义属性(data-,dataset)
01-19
H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 <div id=box1 data-name=Musk> <div id=box2 data-full-name=Elon> 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById...
HTML5的自定义属性data-*详细介绍和JS操作实例
09-28
这样的属性可以在元素上自由添加，用于存储任何非标准的数据信息。在上面的例子中，我们看到一个`<div>`元素用`data-uid`存储用户ID，`data-uname`存储用户名： ```html <div id="user" data-uid="12345" data-...
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
09-28
在JavaScript原生API中，可以使用`dataset`属性来访问data属性，如`elem.dataset.chb`。在给出的例子中，这段代码会在页面加载时遍历所有的div元素，查找具有"data-chb"属性的元素，并为其添加一个"class"为"ui_...
前缀为“data-”的自定义属性
G003003的博客
08-11 431
“data-”的自定义属性
HTML5 data-* 自定义属性及其注意点
热门推荐
陈袁的博客
06-09 1万+
在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式，但取值是必需全部使用小写（后面会说），使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 1.   Html绑定数据写法 1.1简单单词： Click Here 1.2  使用驼峰命名（需要特定注意
js修改div里面的data-*的值
qq_43072912的博客
12-27 9606
使用attributes方法存取 data-* 自定义属性的值 // 使用getAttribute获取 data- 属性 var cjzs= document . getElementById ( 'cjzs' ) ; var c = cjzs. getAttribute ( 'data-to' ) ; // 使用setAttribute设置 data- 属性 cjzs. setAttribute...
div 属性
住在地球的攻城狮
08-08 1794
获取 div并打印. div无 id属性时，由 getElementsByClassName打印. div有 id属性时，由 getElementsByClassName打印. div同时具有 class及 id属性时，由 getElementsByClassName获取后，可用 HTMLCollection数组下标或 HTMLCollec...
Html5 dataset--自定义属性
weixin_34246551的博客
10-24 83
dataset--自定义属性 HTMLElement.dataset data-*属性集 元素上保存数据 <div id="user" data-id="123456" data-account-name="liujl" data-name="刘江龙" data-email="757617012@qq.com" data-m...
Dom模型之dataset属性/Html元素标签的data-*属性
wsxujiacheng的博客
07-19 3563
dataset属性 有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义属性。 id="mydiv" foo="bar"> 上面代码为div元素自定义了foo属性，然后可以用getAttribute()和setAttribute()读写这个属性。 var n = document.getElementById('mydiv')
dataset的使用(结合vue使用碰到了坑)
m0_51431448的博客
12-23 4995
在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" .
HTML5中的数据集dataset和自定义属性data-*
坐在那边看天空 的博客
06-23 2646
在HTML5中可为所有元素添加一种自定义的属性，这种属性的前缀以data-开头，比如：data-name,目的是为元素提供与页面渲染无关，但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。 html结构： p data-name='pName' data-nick-name='dear pName' data-gender='fe
使用vue-seamless-scroll中dataset获取不到元素
最新发布
04-19
在使用vue-seamless-scroll时，如果无法获取到元素的dataset属性，可能是因为以下几个原因： 1. 元素不存在：首先要确保你要获取dataset的元素确实存在于DOM中。可以通过浏览器的开发者工具检查元素是否存在。 2. 元素未正确绑定数据：vue-seamless-scroll是基于Vue.js的插件，它使用了Vue的数据绑定机制。如果你无法获取到dataset属性，可能是因为元素未正确绑定数据。请确保你已经正确地将数据传递给了vue-seamless-scroll组件，并且在模板中正确地使用了数据。 3. 元素未正确设置属性：dataset属性是HTML5新增的属性，用于获取和设置自定义数据属性。如果你无法获取到dataset属性，可能是因为元素未正确设置自定义数据属性。请确保你已经正确地设置了自定义数据属性，并且使用了正确的命名规范（以"data-"开头）。 如果以上方法都无法解决问题，可以尝试使用其他方式获取元素的数据，例如通过class或id选择器获取元素，并使用其他属性或方法来获取所需的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值