DOM HTML5 -操作自定义属性

原创 已于 2024-03-04 16:12:23 修改 · 587 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

于 2024-02-28 17:38:06 首次发布

我们的标签它默认就有自己的属性：id、class、style、src等等

​ 如果它不存在，我们自己写入的叫做”自定义属性“，一般我们用来存储某些数据的场景下使用；

<div class="box" boxTitle="frameworkBox" id="hyy" data-id="myId"></div>
// 这里的boxTitle就是我们的自定义属性
let box = document.querySelector
最低0.47元/天 解锁文章

200万优质内容无限畅学
HTML5自定义属性的用途及编程实践
CyberBladeX的博客
10-08 310
自定义属性是HTML5中一项强大的功能，它允许开发人员在标记中添加自定义的属性和值，以便在编程中使用。总结起来，HTML5自定义属性是一项强大的功能，它允许我们在HTML元素中存储自定义的属性和值。通过在元素中添加自定义属性，我们可以为元素提供附加的信息，而无需使用额外的标记或JavaScript变量。函数，我们可以在CSS中引用自定义属性的值。除了获取自定义属性的值，我们还可以使用JavaScript来设置自定义属性的值。除了使用JavaScript操作自定义属性，我们还可以在CSS中使用自定义属性。
关于HTML5的data-*自定义属性的总结
08-27
HTML5中的data-*自定义属性是一种特殊的自定义属性，它们可以用来存储和操作数据。在HTML5规范中，引入了data-*自定义属性，以提供与渲染无关的信息。这类属性的命名需要添加前缀data-，以区别于标准的HTML属性。 ...
H5自定义属性
ayhg1的博客
06-04 508
** H5自定义属性 ** H5自定义属性 传统的HTML中如果想要实现某种样式，可以在标签上添加id、class、或者在标签上添加固有属性，通过CSS中的类选择器、id选择器、属性选择器来实现，在许多UI框架中，例如：bootstrap，可以通过data-[ ]自定义属性，不用写一行js代码，方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。 例如： <div data-sup= "thisData" id =
HTML——属性
最新发布
zjx1415926的博客
05-30 1038
HTML5 引入了 data-* 属性，允许开发者自定义属性来存储额外的数据。data-*：用于存储自定义数据，通常通过 JavaScript 访问。
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
web开发
03-06 402
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉，此外，你这样做也会导致html语法上不符合Html规范，以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情。 你可以去读一下HTML5的详细规范，但这个自定义data属性的用法非常的简单，就是你可以往HTML标签...
HTML5新攻略：如何使用自定义属性
weixin_34306593的博客
04-22 167
HTML5开发正在如火如荼的进行中，在HTML5中使用自定义属性正逐渐受到开发者们的青睐；此外，它还在Web开发语义中发挥了重要作用。本文我们将探讨通过实践案例来创建和访问HTML5自定义数据属性，包括JavaScript函数。 再使用HTML5前，首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如果你之前有尝试过，你会发现，容易忽略标记验证，而HTML5可以为你提供在有效...
html5的自定义属性
var_infinity的博客
11-29 194
H5新增自定义属性，在标签上，以data-开头。
使用jQuery获取data-的自定义属性
10-23
在Web开发过程中，经常需要操作HTML元素的自定义属性，尤其是以"data-"开头的属性。这些"data-"属性被广泛用于存储页面中的私有、临时或结构化数据。jQuery作为一个流行的JavaScript库，提供了一种简便的方式来处理...
HTML5的自定义属性data-*详细介绍和JS操作实例
12-14
HTML5的自定义属性`data-*`是一种强大的特性，它允许开发者在HTML元素上存储额外的数据，这些数据在页面加载时不会直接展示，但可以通过JavaScript进行读取和修改。这在构建复杂、动态的Web应用时尤其有用，因为它...
HTML5的自定义属性
lingxun123456的博客
06-04 428
以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性： <div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div> 然后获取里面的值是使用 getAttribute来获取自定义属性里面的值： var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-.
HTML5自定义属性
weixin_45982458的博客
03-02 427
HTML5自定义属性必须以data-开头(前缀) 在HTML中以data-开头，在js可以使用元素.dataset.属性名访问 <body> <button data-n="0" data-btn="">按钮</button> </body> <script> var btn = document.querySelector("[data-btn]") btn.onclick = function(){ // var n = par
HTML5 自定义属性
qq_41045651的博客
07-06 1688
需要注意的是，通过自定义属性存储的数据仅在客户端（前端）使用，不会被发送到服务器。自定义属性可以用于 JavaScript、CSS 或其他前端逻辑中，以满足特定的需求。HTML5 提供了自定义属性（Custom Attributes）的功能，允许开发者在 HTML 元素上添加自定义的属性，以便存储额外的数据或提供特定的功能。开头，后面可以跟上任意的自定义名称。这样的命名约定有助于确保自定义属性不与 HTML 或其他标准属性冲突，并且兼容性较好。是自定义属性，它们存储了关于。自定义属性的命名应以。
html5 自定义属性
weixin_34342578的博客
12-19 2013
1.data-*自定义属性介绍 在html5中我们可以通过data-来设置我们需要的自定义属性，进行数据存放 <div id="root" data-age="25"> ROOT </div> 之后可以通过js脚本获取/设置自定义属性，也可以使用CSS属性选择器进行样式设置 2.dataset基本操作 我们先创...
html5--自定义属性
m0_72694993的博客
10-13 4585
4.在标签上通过data-设置的方法和dateset添加的属性获取属性的方式一样，但是要有一点需要注意。当我们设置属性名的时候如果出现多个字符串即像下边data-set-input这种情况的话，在调用属性的时候需要用驼峰命名。1.直接添加，通过querySelector获取到html元素之后，直接.属性进行初始化就可以为元素添加自定义属性了。2.setAttribute('属性名','属性值')，添加自定义属性并初始化。3.通过dateset方法添加的属性，通过dateser.属性名获取。
在html5中可以自定义属性
zyljjf的博客
12-14 772
在html5中可以自定义属性 格式 data-*=””; 如 data-info=”我是自定义属性” 通过Node.dataset[‘info’]获取 Node.dataset是以对象形式存在，当我们为同一个DOM节点指定多个自定义属性时， Node.dataset则出了所有自定义属性的值
HTML5 自定义数据属性（data-*）
Allen-
12-10 1566
HTML5 引入的自定义数据属性（data-*）为开发者提供了一种将自定义数据嵌入HTML元素的标准方法。这个特性使得在不使用非标准属性或额外的 DOM 属性的情况下，能够在 HTML 元素上存储额外信息。
[HTML5]自定义数据属性
cychai的专栏
09-08 1900
原文见 HTML 5 data- Attributes   http://ejohn.org/blog/html-5-data-attributes/ 自定义数据属性是在HTML5中新加入的一个特性。对于规范来说，好像有点怪异–但他的确提供了一些便利。 简单来说，
html5自定义属性的方法
QUX轻博客
08-08 876
html5中允许标签自定义属性，并传值，这样通过js接受判断这个参数，我们可以控制页面显示不同的效果，例如点赞/收藏的状态，页面布局的显示控制状态，当然也可以直接当h...
ExtTag: 将HTML自定义属性转换为JavaScript对象
获取HTML自定义属性变成js对象 然后执行”则进一步指出，获取自定义属性的目的不仅仅在于获取，而是要将其转换为JavaScript对象，并在此基础上执行某些操作或程序逻辑。 标签“ExtTag.HTML自定义属性”表明这一主题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值