H5 data-＊属性，设置获取方法总结

HTML5 data-* 自定义属性

1.设置方法

A.直接在标签内书写，格式如下

<div id="test" data-age="24">Click Here
</div>

B.用 js 设置

var test = document.getElementById('test');
test.dataset.my = 'Byron';

2.获取方法

var test = document.getElementById('test');test.dataset.my = 'Byron';test.dataset.birthDate = '19890615';test.onclick = function () {alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);}

注意：

我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = 'Byron';的形式。
如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

如果使用jQ

<div id="test" data-name="william" data-age="25" gender="male"></div>

上述元素几个 data 属性的获取分别为：

var div = $('#test')
console.log(div.data('name'))  // 'william'
console.log(div.data('age'))  // 25  (数值)
console.log(div.attr('gender'))  // 'male'

和html5的api不同的是，jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。
如果这样做不会改变数值的表示，那么该值将转换为一个数字（number）。
例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

所以，想把一个对象设置到标签里，应该这么写

div.data('setObj', JSON.stringify({'name': 'william', 'age': 22}))

但是取的时候，只需要

var obj = div.data('setObj')  //  {'name': 'william', 'age': 22}  (object类型，不需要用 JSON.parse() 转换了)

data 相关的就写到这里，不详尽的地方大家可以自己尝试一下，很快就可以出来的。

H5 data-＊属性，设置获取方法总结相关推荐

html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解
编辑注:HTML中使用data-xx="xx"开头标记的属性到底有什么用,直接使用xx="xx"不是更简单吗?其实data-xx是HTML5的一个属性,支持通过 ...
bootstrapValidator验证的remote中data属性里获取select一直是默认值
1 budgetEditionNo:{ 2 message:'版本号输入不正确' , 3 validators:{ 4 notEmpty:{ 5 message:'版本号不能为空,请填写' 6 } , ...
DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性
讲评节点创建 Document.prototype ← document.createElement('div') document.createTextNode('xxx') // 创建文本节点 ...
datepicker 属性设置以及方法和事件
DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当 ...
java sql 参数_java jdbc连接数据库，Properties 属性设置参数方法
今天在整合为数据库发现在配置中实现的赋值方式,可以用代码实现.特记录下共以后参考: 代码: // 操作数据库 Connection conn; String strDatabase ="no ...
2.1、spring属性注入-Set方法注入
代码地址:spring2.1.zip - 蓝奏云文件大小:15.1 K|https://www.lanzouw.com/imlEwvptwre Set方法注入的原理是spring先通过指定id的类的无 ...
kotlin获取属性_Kotlin程序| 属性获取器和设置器方法的示例
kotlin获取属性属性获取器和设置器方法 (Properties Getter and Setter Methods) Variable having a class-level scope, d ...
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
data自定义属性获取方法和设置
<div data-id="id=1"></div><script>//js原生获取方法 var id = ...
jQuery：设置获取属性、遍历添加删除元素、尺寸、位置
目录一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容三.jQuery对元素操作 1.遍历元素 2.创建 ...

H5 data-＊属性，设置获取方法总结

HTML5 data-* 自定义属性

1.设置方法

A.直接在标签内书写，格式如下

B.用 js 设置

2.获取方法

如果使用jQ

H5 data-＊属性，设置获取方法总结相关推荐

最新文章

热门文章

H5 data-＊ 属性，设置获取方法总结

HTML5 data-* 自定义属性

1.设置方法

A.直接在标签内书写，格式如下

B.用 js 设置

2.获取方法

如果使用jQ

H5 data-＊ 属性，设置获取方法总结相关推荐

最新文章

热门文章

H5 data-＊属性，设置获取方法总结

H5 data-＊属性，设置获取方法总结相关推荐