html —— data-*自定义属性

最新推荐文章于 2024-04-20 02:03:48 发布
最新推荐文章于 2024-04-20 02:03:48 发布
阅读量2.8k 收藏 4
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19865749/article/details/52494929
版权

一、基本说明

文档说明：

The data-* global attributes form a class of attributes, called custom data attributes, allows proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.

data-*全局属性形成一个属性类，称作自定义数据属性，允许专有的（proprietary adj，专有的，专利的，所有（人）的；n，所有权）信息被改变，在HTML 与对应的可能被用于script 的DOM 对象之间。所有这些自定义数据都是可通过（via prep，通过，经过）设置了这个属性的元素的HTMLElement 接口获取的，然后可通过HTMLElement.dataset属性访问到该属性值。*可被任意合法的命名代替，所谓合法，是指遵循下面的规则：

只可包含字母、数字和以下字符：dash（-）、dot（.）、colon(:)、underscore（_）。此外不能包含大写的ASCII码字母（务必记住！）。

Note that the HTMLElement.dataset property is a StringMap and the name of the custom data attribute data-test-value will be accessible via HTMLElement.dataset.testValue as any dash (U+002D) is replaced by the capitalization of the next letter (camelcase).

记住HTMLElement.dataset 属性是一个StringMap映射表，且这个自定义属性的名字（例data-test-value）将通过HTMLElement.dataset.testValue 被访问因为所有的dash（破折号）将被下一个字母的大写形式代替。（即访问自定义的data-test-value属性时，使用的是对应的testValue，见例子）

原网页：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/data-*


二、简单使用

data-*自定义元素的命名可有多个破折号，访问时规则一致：

<!DOCTYPE html>
<html>
<head>
	<title>测试data-*自定义属性</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="test" data-test-custom-attr="20"></div>
	<script type="text/javascript">
		var firstTimeValue=document.getElementById("test").dataset.testCustomAttr;
		document.getElementById("test").dataset.testCustomAttr=50;
		var SecondTimeValue=document.getElementById("test").dataset.testCustomAttr;
		alert(firstTimeValue+" "+SecondTimeValue);
	</script>
</body>
</html>
提示结果为：20  50


HTMLElement.dataset方法基础支持：Chrome 8、Firefox 6.0、IE 11、Opera 11.1、Safari 6。

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

可用一般方法替代：

HTMLElement.setAttribute(‘attriName’，‘value’);

HTMLElement.getAttribute("attriName");


个人感悟：当需要的自定义属性不多，且易于管理时，可用在script中声明的变量代替这些属性值的作用。






Liekkas_BX
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery知识点总结
xgb的博客
05-25 9568
一：认识jqueryjquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库二：初始化jquery监听页面加载完成                                                              ...
微信小程序知识点（上）
qq_20411471的博客
03-17 3555
1.流式布局中flex-direction:属性要和display:flex搭配使用。 2内容居中的方法：.xxx{ height: 80rpx; line-height: 80rpx; }
HTML data-* 属性（自定义属性）
努力努力再努力的博客
07-15 541
HTML data-* 属性 data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符 属性值可以是任意字符串 注： data-* 属性是 HTML5 中的新属性。 示例 ： <!DOCTYPE html> <html> <head> <script>
如何使用HTML5自定义数据属性以及原因，2024年最新2024年GitHub上那些优秀前端开源库总结
最新发布
m0_58269070的博客
04-20 977
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。您应该知道jQuery还会尝试将从data属性获得的字符串内部转换为合适的类型，例如数字，布尔值，对象，数组和null。方法访问元素的数据属性。属性的帮助是访问数据属性的一种更简单的方法。
HTML5中自定义数据属性(2)data-*自定义数据
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-06 926
属性的值时，属性名中的连字符（-）将被转换为驼峰命名法（camelCase）。因此，在上面的示例中，我们使用。属性非常有用，可以用于在HTML元素上存储额外的信息，这些信息可以在JavaScript中进行访问和处理。属性是HTML5中引入的一种自定义数据属性，用于在HTML元素上嵌入自定义数据。属性，分别存储了容器中的项目限制和排序顺序。属性的值，可以使用JavaScript中的。在上面的示例中，我们在一个。在上面的示例中，我们在一个。在上面的示例中，我们在一个。在上面的示例中，我们在一个。
如何使用data-test-id来提高自动化测试的准确性？
测试萌萌
05-30 519
你有没有过这样的经历：收到通知，告诉你的自动化测试失败了？而当检查时，发现只是一些开发人员对映射的元素进行了一些属性改变？虽然这种情况不常发生，但却并不罕见。这是因为很多时候，开发团队没有时间去沟通这些变化，也许是因为需要紧急实施，甚至是一个热修复可以改变元素的属性，然后就推到生产中。
html元素data属性设置变量,在VUE style中运用data中的变量的要领详解_WEB前端开发...
weixin_42494742的博客
06-04 864
近来项目中的大众组件，在复用的时刻，针对差别的场景，须要不停变动CSS里款式的值，而且已经有了全局的大众组件款式了假如用vue传统的动态绑定class和style的体式格局去修正款式(文末会提到)，须要分外写许多变量和模块class，那假如我的款式的值，能够从父组件，传到子组件，子组件依据传入值去衬着对应款式的值，实在就是要再style中运用data和props中的变量，这要怎么做呢？相干进修引...
用 Data 定义变量
心想事成
06-16 2065
用 Data 定义变量Data a{ 'aaaaaa' } $a.GetType() StringData Strings { ConvertFrom-StringData @' MSG_TARGET_IMAGE = Target image: '{0}' ERR_FILE_NO_EXISTS = The file '{0}' does not exists '@ }
从入门到精通HTML5——PDF——网盘链接
02-27
　2.5.3 背景图像属性——background 32 　2.5.4 设置链接文字属性——link 35 　2.5.5 设置边距——margin 37 　2.6 页面的注释标记 38 　2.7 实例演练——创建基本的HTML网页 38 　2.8 小结 39 　2.9 习题 40 　第...
蓝海豚Lht_CV2.0_1231商业版_-_模板2套
05-29
（1）进入“管理应用”—“添加新应用”—选择安装方式（自定义安装）配置 只需填写“应用名称”、“应用的 URL”、“应用类型”、选择“是否开启同步登录” （2）提取“应用的 UCenter 配置信息”，添加到/data/...
JQuery入门——用bind方法绑定事件处理函数应用介绍
01-19
参数data是作为event.data属性值传递对象的额外数据对象。参数fn是绑定到每个选择元素的事件中的处理函数。 2、示例代码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transiti
java源码包---java 源码 大量 实例
04-18
第一步：运行ServerData.java 启动服务器，然后服务器处于等待状态 第二步：运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步：在登陆后的界面文本框输入文本，然后发送 可以同时启动...
精通QTP——自动化测试技术领航
07-12
1.8 数据池（Data Table）的应用 187 1.8.1 引言 187 1.8.2 学会使用DataTable进行参数化 188 1.8.2.1 为什么要进行参数化 188 1.8.2.2 如何具体操作 191 1.8.2.3 Global Sheet VS Local Sheet 194 1.8.3 Test ...
js之 data-*自定义属性
weixin_30487201的博客
04-11 122
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script></head><...
【HTML】自定义属性（data）
小秀的博客
01-31 757
注意：传统方法无兼容性问题，但是不够优雅、方便。HTML5新方法很优雅、方便，但是有兼容性问题。优势：自定义的数据可以让页面拥有更好的交互体验(不需要使用Ajax或去服务端查询数据)。自定义属性 data: 的用法（如何设置,如何获取) ，有何优势？为了解决类似的问题，我们可以使用自定义属性（data-）。这时就不存在属性冲突的问题。此时 title 既是。
HTML中关于data-自定义属性的使用
foryond的专栏
08-12 2015
在 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
:data-xxx自定义属性（定义自己需要的数据）
m0_68956554的博客
07-17 191
（定义自己需要的数据）data-xxx自定义属性
[Unit testing] data-test attr FTW
weixin_30532369的博客
10-30 83
Most of time, we get used to use class name as a selector in the test. But one problem for this is classname is used for styling, when we also use it for testing, we are not sure whether we can remov...
HTML5 的data-* 属性（自定义属性）的用法
单枪匹码
12-09 2656
1、说明：点击了解更多HTML全局属性 data-* 是HTML5的新属性，用于储存页面或应用程序的私有自定义数据，平时我们往元素中储存数据都是放到元素的value中，放到value中的数据用户可以看到，如果不想让用户看到还要将元素隐藏，但是如果我们不能将元素隐藏并且value中有需要存放的值，那么我们还想额外储存一些不想让用户看到，并且对我们的一些判断或操作起到非常关键作用的数据的时候（与渲染无...
element ui——Pagination 自定义total模板
07-20
在 Element UI 的 Pagination 组件中，你可以通过 `slot-scope` 属性来自定义 total 模板。下面是一个示例代码： ```html <template> <div> <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :pager-count="5" > <span slot="total" class="custom-total">{{ totalText }}</span> </el-pagination> </div> </template> <script> export default { data() { return { pageSize: 10, total: 100, }; }, computed: { totalText() { return `共 ${this.total} 条数据`; }, }, methods: { handleSizeChange(size) { this.pageSize = size; }, handleCurrentChange(page) { // 处理页码改变事件 }, }, }; </script> <style> .custom-total { margin-right: 10px; } </style> ``` 在上面的代码中，我们使用了 `slot-scope` 属性来自定义 total 模板。通过设置 `slot="total"`，我们可以将自定义的模板放置在 Pagination 组件中。在这个示例中，我们使用了一个计算属性 `totalText` 来生成自定义的 total 文本，并使用 `class="custom-total"` 来添加一些样式。 你可以根据自己的需求修改模板的样式和内容。希望这个示例能帮助到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值