html的data-*属性使用注意事项

最新推荐文章于 2024-05-19 13:19:14 发布
最新推荐文章于 2024-05-19 13:19:14 发布
阅读量1.3k 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34787830/article/details/79817226
版权
名称设置为data-indexName，取值用this.dataset.indexName ，这样是娶不到值的

取值的时候需要用indexname，所有字母必须小写

qq_34787830
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5新增属性data-*和js/jquery之间的交互及注意事项
09-27
在使用data-*属性时，有一些注意事项需牢记： - data-*属性在第一次被`.data()`方法访问后，其后的读取和修改都将发生在jQuery内部，而不是DOM本身。 - 当使用`.attr()`方法设置data-*属性时，务必记得将JSON对象的...
HTML5自定义属性之data-*
weixin_30387799的博客
08-25 367
HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。 <input type="button" value="按钮" data-index="10" data-index-color="r...
HTML5自定义属性之data-index
weixin_33832340的博客
11-17 1万+
#使用jquery获取data-index的值 jquery 的版本最好高一些 #html &lt;div id = 'div'&gt;&lt;span data-field='demo'&gt;&lt;/span&gt;&lt;/div&gt; #js alert($('#div&gt;span').data('field')); 输出:demo          ...
HTML标签data-属性的作用
最新发布
hexadecimal_001的博客
05-19 294
这些数据属性可以帮助开发者在不使用全局变量的情况下，将数据与特定的HTML元素关联起来，从而实现更加模块化和可维护的代码。在上面的例子中，我们给按钮元素添加了一个data-message属性，值为"Hello, World!接下来，我们可以使用JavaScript来获取这个data-属性的值，并在点击按钮时显示提示消息。这样，我们就成功地使用data-属性存储了自定义数据，并在JavaScript中访问和使用它。我们可以使用data-属性来存储这个提示消息，并在JavaScript中访问和显示它。
JavaScript知识点笔记（三）
weixin_51227348的博客
03-29 1304
DOM内容DOM：（DOM的元素对象获取的方法可以在MDN内查询到）事件三要素：事件源、事件类型、事件处理程序节点操作注册事件（绑定事件）DOM事件流阻止事件冒泡事件委托 DOM：（DOM的元素对象获取的方法可以在MDN内查询到） 文档对象模型（Document Object Model 简称DOM），是一个编程接口。 console.dir 打印返回的元素对象 更好的查看里面的属性和方法 HTML5新增的方法获取 1.document.getElementsByClassName(‘类名’); //根据
h5自定义属性
qq_40687516的博客
12-21 260
<div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(d...
data-属性的作用是什么？
小飞的博客
05-12 4408
data-为 H5 新增的为前端开发者提供自定义的属性， 这些属性集可以通过对象的dataset属性获取， 不支持该属性的浏览器可以通过getAttribute方法获取， 需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 驼峰 data-list-name element.setAttribute('data-index',2) element.getAttribute('data-index') H5新增的 ie11才开始支持 element.dataset.i
HTML5自定义属性中的使用数据属性(using data attributes)
qq_61716556的博客
05-23 321
HTML5允许用户使用自定义属性来保存并使用这些数据。自定义属性出现在元素标签内部，这些属性与特定的元素项关联，允许我们在html元素中保存信息。 使用数据属性是以data-为前缀的。后面内容也可以跟连字符-。例如data-first-name，data-index 保存信息多种多样。例如为了计数li的顺序使用data-index，为了指定父子关系使用data-parent。 这个是bilibili的一部分网页代码，可以看到使用数据属性的大量使用。 读写使用数据类型 由于使用数据类型是自定..
vue2中的keep-alive使用总结及注意事项
08-28
Vue2 中的 Keep-Alive 组件使用总结及注意事项 Keep-Alive 组件是 Vue2 中的一个内置组件，能够在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。它可以与 Vue-Router 进行结合，缓存某个视图的整个内容。...
jQuery HTML获取内容和属性操作实例分析
10-15
主要介绍了jQuery HTML获取内容和属性操作,结合实例形式分析了jQuery HTML获取内容和属性相关函数用法与操作注意事项,需要的朋友可以参考下
layui xm-select插件注意事项.rar
09-16
例如，通过`data-xm-select`属性开启插件，`lay-filter`用于设置过滤器，`lay-search`开启搜索功能等。 3. **数据绑定**： 数据绑定是xm-select的一个关键功能。你可以通过`layui.form.val()`方法将后台数据动态...
BootStrap Validator使用注意事项(必看篇)
09-01
然而，在使用Bootstrap Validator时，有几个关键的注意事项需要开发者注意，以确保验证功能的正常运行和用户体验。 首先，对于要进行验证的每个表单元素，**必须包含`name`属性**。这是Bootstrap Validator识别并...
如何使用 HTML data-属性
allway2的博客
10-19 2930
数据属性是为 HTML 元素提供额外信息的好方法，但是使用 JavaScript 从这些属性中获取和设置数据才是真正使此功能有用的原因。数据属性功能强大，在我看来未得到充分利用，但与任何其他技术一样，请记住，数据属性只是工具带上的一个工具，它们应该是构成功能齐全的解决方案的更大方法组合的一部分。数据属性是我们可以设置的钩子，为我们的HTML提供与CSS和JavaScript通信的新方式。当其他人（或我们未来的自己）进入阅读我们的CSS时，我们的意图会更加清晰。例如，让我们在段落元素后面显示数据属性的值。
HTML data 元素
lio-zero 的博客
02-09 790
data 元素表示其内容，以及值属性中这些内容的机器可读形式。Edge、Firefox 和 Safari 都支持 <data> 元素。 value 属性是必需的，其值必须以机器可读的格式表示元素的内容。HTML 标准建议如下： 元素可以与页面中的脚本一起使用，当脚本有一个文本值与一个人类可读的值一起存储时。(用法近似于 data-*) <p>New Products:&...
html data有哪些属性？
zqzgng的博客
11-20 266
根据提供的引用内容，HTML中的data属性是由开发人员定义的，它为我们的HTML提供了与CSS和JavaScript通信的新方式。我们可以使用data属性将自定义数据附加到HTML元素上，这些数据可以在JavaScript中使用。HTML5中，data属性的命名必须以“data-”开头，后面跟着自定义名称。在JavaScript中，我们可以使用getAttribute()方法来获取data属性的值，也可以使用dataset属性来访问data属性的值。
HTML ＜data＞ 标签
玄链教育
05-31 275
data>标签用于添加给定内容的机器可读翻译。该元素既为数据处理器提供了机器可读的值，又为浏览器中的渲染提供了人类可读的值。提示：如果内容与时间或日期相关，请改用 元素。
html之data-*属性的用法（如何设置，如何获取），有何优势
subsistent的博客
03-26 1293
这里的data属性名是指data-后面的名字。data = button.dataset.data属性名;这里的data属性名是指data-后面的名字。通过JavaScript内置的setAttribute('data属性名','新内容')即可设置。通过JavaScript内置的getAttribute('data属性名') 即可获取。通过该数据类型的(dataset) API设置data值，IE10以上才支持；1.其储存的自定义数据能够被页面的JavaScript利用，可以创建更好的用户体验。
小程序获取节点绑定数据data-index的方法
热门推荐
大熊
12-27 3万+
1.微信小程序dataset undefined ？？ 2.如何获取数组index索引？ 3.获取节点的属性，width ,height,left,right等等 方法一（一般用这个获取数据,记得要bindtap点击执行这个函数才能获取到currentTarget.dataset）： wxml: &lt;view data-id="{{1}}" data-haha="{{i...
HTML data-*自定义属性
Fanbin168的专栏
07-06 3274
HTML5 data-* 自定义属性 @{ Layout = null; } Index2 获取data-age的值 获取data-name的值 //第一种方式获取data-age的值 var fun = { GetR
v-deep怎么使用
09-06
在Vue中，`v-deep`是一种用于修改特定组件样式的深度选择器。在使用`v-deep`之前，需要确保你的项目中使用的是支持该语法的CSS扩展语言（如SCSS）。以下是使用`v-deep`的几种用法和注意事项： 1. 使用`::v-deep`选择器来修改外部第三方组件的样式。例如，在具有样式作用域的`<style>`标签内，你可以使用以下代码来修改`el-button`组件内`span`元素的颜色： ```html <style lang="scss" scoped> .el-button::v-deep { span { color: '#f00'; } } </style> ``` 2. 如果你使用的是dart-sass作为CSS扩展语言，需要使用`::v-deep`代替`/deep/`或`>>>`的写法来修改第三方组件的样式，因为dart-sass不支持这两种写法。所以，在使用dart-sass时，你可以按照以下格式来修改样式： ```html <style lang="scss" scoped> .el-button::v-deep { span { color: '#f00'; } } </style> ``` 需要注意的是，如果你在`<style>`标签中使用了`scoped`属性，`v-deep`选择器只会对当前组件内的元素生效，不会影响其他组件的样式。如果不使用`scoped`属性，则可以在任意组件中使用`v-deep`选择器来修改样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [::v-deep的使用](https://blog.csdn.net/qq_45846359/article/details/123874197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [deep的用法](https://blog.csdn.net/weixin_43206442/article/details/128589342)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值