H5 data-* 属性,设置获取方法总结

HTML5 data-* 自定义属性

1.设置方法

A.直接在标签内书写,格式如下
Click Here
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);
        }

注意:

  1. 我们在添加或读取属性的时候需要去掉前缀data-*,像上面的例子我们没有使用test.dataset.data-my = 'Byron';的形式。

  2. 如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式

如果使用jQ

上述元素几个 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-* 属性,设置获取方法总结)