HTML5中新增了一个自定义的数据属性,该属性以“data-”为前缀。
在开发中,我们可以方便地利用它来存放一些数据,然后通过JavaScript脚本来获取相应的属性值,从而得到预设的数据内容。如:
<div id="user" data-key="admin" data-user="winstar"></div>
在脚本中获取/设置data-属性值(使用jQuery)
var key = $('#user').attr('data-key'); $('#user').attr('data-key', 'customer');
上述的对于data-自定义数据属性的使用在所有现代浏览器中都能正常工作,但它不是HTML5引进data-的真实用途。因为在data-出现以前,我们有时也会为标签添加自定义的属性,采用类似的方法也能正常工作。
HTML5在引进data-定义数据属性目的在于:
(1)标准化自定义属性,使HTML文档规范化;
(2)提供相应的JavaScript API:dataset属性,方便对自定义数据属性的操作。
dataset属性使用示例:
<div id="user" data-key="admin" data-out-of-time></div>
在JavaScript中读取/设置:
var user = document.getElementById('user'); var key = user.dataset.key; //'admin' var timeout = user.dataset.outOfTime //注意:连字符变成驼峰 user.dataset.key = 'customer';
但是,由于目前浏览器对dataset的支持并不是很好,所以目前还是使用之前的方法读取data-的属性值。
相关推荐
而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义...
HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险
你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 data-开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。...
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据,这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情
存储数据,这种自定义属性一般用“data-”开头。 存储的(自定义)数据能够被页面的 JavaScript 中利用。 data-* 属性包括两部分: * 属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符...
大家总是习惯使用HTML标签添加自定义属性来存储和操作数据,所以才在HTML5规范里增加了一个自定义data属性,这样使用更便捷,一起跟随小编过来看看吧
jQuery 的 data API 实现方式有缓存数据的效果 使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储...
可能的 HTML 元素属性名称解释例子data-ga-click-event-category 必需的视频数据-ga-点击-事件-动作可选的玩数据点击事件标签可选的Rick astley - 永远不会放弃你data-ga-click-event-value 可选的3(秒数) 数据-ga...
一个尝试使用data- *属性将原始HTML与Javascript绑定以创建动态行为的小项目。 逻辑 任何元素都可以具有“数据模块”属性,该属性告知该元素将使用哪个模块,这是一个简单JavaScript函数,可以接受该元素并使用...
阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 “data-“开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。...
开放数据搜索组件安装npm install opendata-search-component 用法例子可以在看到。 在DOM中使用元素之前,请包括脚本。 就像将其他HTML元素一样,将元素放在页面上。 <opendata></opendata>选件可以将选项指定为...
9-5 4.php xml编程④-dtd属性 引用实体 参数实体 ide开发xml 9-5 5.php xml编程⑤-复杂的dtd综合练习 9-5 6.php xml编程⑥-dom基本概念 phpdom编程(1) 9-6 1.回顾 9-6 2.php xml编程⑦-phpdom编程(2) 9-6 3.php xml...
AnalyticsDataHTML 书签以在Alma Analytics Columns属性中添加自定义HTML数据格式安装转到此网址,然后按照说明进行操作: 如何使用要添加和应用html格式的数据视图,只需打开“列”属性,转到“数据格式”选项卡,...
autocomplete支持: 1:本地响应模式。2.Ajax模式。 ------------------------------------------------------...根据传进的“可以查询的数据属性数组”和“所要显示的数据属性数组”,显示记录集。 详情请见附件。
html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。 下面是元素应用data属性的一个例子: <div id=day-meal-expense data-drink=tea data-food=noodle data-meal=lunch>$18.3 要想获取某个...
通过HTML数据属性易于使用。 安装 npm i @emretulek/jbvalidator 或从jsdelivr CDN抓取: < script src =" https://cdn.jsdelivr.net/npm/@emretulek/jbvalidator@latest/dist/jbvalidator.min.js " > </...
data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值...