H5 自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-, 目的是为元素提供与渲染无关的信息，或者提供语义信息。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

添加自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap（对象）的一个实例。

var myDiv = document.querySelector('#myDiv');//取得自定义属性的值
var appId = myDiv.dataset['appId'];
var myName = myDiv.dataset['myname'];//设置自定义属性的值
myDiv.dataset['appId'] = 23456;
myDiv.dataset['myname'] = "Michael";

支持自定义属性的浏览器有IE11+、Firefox6+和Chrome。兼容性不是很好。

jQuery提供了一个方法data(obj)可以使用

//获取自定义属性的值
$('#myDiv').data('appId');//设置自定义属性的值
$('#myDiv').data('appId','456789');$('#myDiv').data({'appId':987765,'username':'huxiaosheng'
});

转载于:https://www.cnblogs.com/hynb/p/6045248.html

H5 自定义数据属性相关推荐

使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
Web开发技巧：使用自定义数据属性创建弹出窗口
2019独角兽企业重金招聘Python工程师标准>>> 在开发web应用时,有时会用JavaScript获取文档之外的信息,某些情况下,我们需要用一些技巧来处理这些额外信息以保证We ...
HTML5自定义数据属性data-*
'人'在江湖,'身'不由己 HTML元素属性可以分为两种类:基本属性和自定义数据属性基本属性: id.class等基本属性的主要作用是用来给一组元素添加样式信息的或者用来获取指定元素的. & ...
探索在原生网页中使用自定义数据属性
先说说我为什么有这种"奇怪"的想法. 它基于这样一个场景:我最近闲来无事完善了一个小demo:音乐播放器.在里面有一个功能 -- 点击列表某一项弹出音乐播放弹框.我原先一直是&qu ...
如何使用HTML5自定义数据属性以及原因
为什么要使用自定义数据属性? 很多时候,我们需要存储与不同DOM元素关联的信息.这些信息对于读者而言可能不是必不可少的,但是易于访问将使我们的开发人员的生活更加轻松. 例如,假设您在网页上有一个不同餐 ...
uniapp中应用H5自定义二维码扫码界面
uniapp中应用H5自定义二维码扫码界面最终效果 pages配置组件代码最终效果 pages配置 {"path": "components/barcode/sca ...
微信h5自定义分享,加缩略图等
微信H5自定义分享必须有通过微信认证的公众号才可以自定义. 代码如下: <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0 ...
如何使用 HTML5 自定义数据属性
如何使用 HTML5 自定义数据属性在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一 ...
html5游戏怎么修改数值,如何使用HTML5自定义数据属性
在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...

H5 自定义数据属性

H5 自定义数据属性相关推荐

最新文章

热门文章