您的位置：首页 > Web前端 > HTML5

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

2016-11-29 09:46 375 查看


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 相关的就写到这里，不详尽的地方大家可以自己尝试一下，很快就可以出来的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航