html5的自定义属性

原创 已于 2023-09-26 10:50:02 修改 · 217 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #css

于 2022-11-29 19:03:22 首次发布
本文介绍了如何在HTML中使用自定义属性（data-XXX）来存储数据，并通过JavaScript的getAttribute和setAttribute方法进行读写操作。示例展示了如何在<div>元素上定义并修改data-index属性的值，这在不保存到数据库的情况下保留页面状态非常有用。

自定义属性目的是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。

自定义属性在标签上，以data-XXX="XXX"的形式书写并赋值。

<div data-index="1"></div>

以getAttribute获取自定义属性的值

// 获取书写了自定义属性的标签
const div = document.querySelector('div')
// 获取当前自定义属性的值 ->'1'
console.log(div.getAttribute(data-index))

以setAttribute修改自定义属性的值 

div.setAttribute("data-index","2")
// d当前再次获取‘data-index’的值，就变成2了

HTML5自定义属性的用途及编程实践
CyberBladeX的博客
10-08 343
自定义属性是HTML5中一项强大的功能，它允许开发人员在标记中添加自定义的属性和值，以便在编程中使用。总结起来，HTML5自定义属性是一项强大的功能，它允许我们在HTML元素中存储自定义的属性和值。通过在元素中添加自定义属性，我们可以为元素提供附加的信息，而无需使用额外的标记或JavaScript变量。函数，我们可以在CSS中引用自定义属性的值。除了获取自定义属性的值，我们还可以使用JavaScript来设置自定义属性的值。除了使用JavaScript操作自定义属性，我们还可以在CSS中使用自定义属性。
DOM HTML5 -操作自定义属性
最新发布
汪汪汪汪
02-28 640
​ 如果它不存在，我们自己写入的叫做”自定义属性“，一般我们用来存储某些数据的场景下使用；我们的标签它默认就有自己的属性：id、class、style、src等等。
HTML5如何添加自定义标签属性(data-自定义属性).zip
01-10
HTML5如何添加自定义标签属性(data-自定义属性).zip
H5自定义属性
weixin_59179354的博客
04-16 1979
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。 自定义属性获得是通过getAttribute('属性')获得，但有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。 h5新增了自定义属性：规定自定义属性date-开头作为属性名并赋值。 比如<div date-index='1'></div> 或者通过js设计 element.setAttribute('date-index',2) ...
h5自定义属性
m0_62962469的博客
03-12 2021
自定义属性的目的:为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性不能通过元素.属性名的方式来获取，结果为undefined。 有些属性容易引起歧义，我们不容易分辨出是内置属性还是自定义属性。 1.h5自定义属性 h5规定自定义属性 date- 为开头作为属性名并且赋值 比如 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
总结html5自定义属性有哪些
12-28
H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性。 <div id=box1 data-name=Musk></div> <div id=box2 data-full-name=Elon></div> 获取 使用H5自定义属性对象dataset来获取 let box1 = document....
HTML5自定义属性的问题分析
12-14
问题背景 在页面与js传值中我们经常用到data-id="1"的方式，然后通过e.target.dataset.id取id...HTML5 自定义属性 网站中经常会看到以data-开头的属性定义,虽然W3C不认定,但最新HTML5规定data-是合理的,在HTML5中,任何
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
12-30
这些属性可以任意添加、随便命名，只要以 data- 开头即可添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 <div id=box data-name='ghostwu' data-age='22' data-sex='man'>ghostwu tell ...
HTML5 自定义属性
qq_41045651的博客
07-06 1750
需要注意的是，通过自定义属性存储的数据仅在客户端（前端）使用，不会被发送到服务器。自定义属性可以用于 JavaScript、CSS 或其他前端逻辑中，以满足特定的需求。HTML5 提供了自定义属性（Custom Attributes）的功能，允许开发者在 HTML 元素上添加自定义的属性，以便存储额外的数据或提供特定的功能。开头，后面可以跟上任意的自定义名称。这样的命名约定有助于确保自定义属性不与 HTML 或其他标准属性冲突，并且兼容性较好。是自定义属性，它们存储了关于。自定义属性的命名应以。
HTML5的自定义属性
lingxun123456的博客
06-04 452
以前我们需要自定义属性的时候一般是这样做的，在标签里面加上我们自己设置的一些属性： <div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div> 然后获取里面的值是使用 getAttribute来获取自定义属性里面的值： var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-.
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
web开发
03-06 410
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉，此外，你这样做也会导致html语法上不符合Html规范，以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情。 你可以去读一下HTML5的详细规范，但这个自定义data属性的用法非常的简单，就是你可以往HTML标签...
关于H5自定义属性
xiaoxu的博客
08-28 1203
[toc] 今天做步步高公司的校招Web前端面试题，考到了H5中的自定义属性。说实话真的一脸懵逼，啥是自定义属性？？？？其实这个自定义属性以前做项目用框架时经常见到，但是并没有去了解。 自定义属性的存在形式 其实就是HTML标签中的data-*属性 作用 自定义数据属性是为了保存页面或者应用程序的私有自定义数据，这些自定义数据属性保存进DOM中，对于整个DOM的布局和表现无任何影响，...
H5新增的自定义属性
m0_59345890的博客
08-18 468
data- 属性名如果包含了连字符，例如：data-date-of-birth ，浏览器解析时连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是： dateOfBirth。2、在js脚本中存取自定义属性，用到两个方法分别是存——setAttribute("自定义属性名"，"属性值")和取——getAttribute("自定义属性名")写法：前缀data-自定义属性名="属性值" ，例如：data-user="zhangsan"1、可以直接在标签行内定义。...
H5自定义属性、存储技术
nangongwenxuan的博客
02-01 198
H5自定义属性、存储技术
HTML5自定义属性
文摘资讯
01-22 393
：点上面关注免费学习前端知识！HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可。来看一个例子。添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射
ExtTag: 将HTML自定义属性转换为JavaScript对象
标题“ExtTag,获取HTML自定义属性”所涉及的知识点主要集中在Web开发领域，特别是在JavaScript编程中，如何利用特定的库或工具（在此案例中，特指ExtTag）来获取HTML元素的自定义属性（即以`data-`为前缀的属性），...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值