HTML5data-*自定义属性实例分享-
在jQuery的attr与prop提到过在IE9以前版本中要是运用property不妥会造成内存泄露题目,并且对于Attribute和Property的区别也让人十分头痛,在HTML5中增加了data-*的方式来自定义属性,所谓data-*现实上上就是data-前缀加上自定义的属性名,运用这样的构造可以进行数据寄存。运用data-*可以解决自定义属性凌乱无治理的近况。
读写方式
data-*有两种设定方式,可以直接在HTML元素标签上书写
Click Here
其中的data-age就是一种自定义属性,固然我们也可以通过JavaScript来对其进行操纵,HTML5中元素都会有一个dataset的属性,这是一个DOMStringMap类型的键值对汇合
var test = document.getElementById('test'); test.dataset.my = 'Byron';
这样就为p增加了一个data-my的自定义属性,运用JavaScript操纵dataset有两个需要注意的地方
1. 我们在增加或读取属性的时候需要去除前缀data-*,像上面的例子我们没有运用test.dataset.data-my = 'Byron';的情势。
2. 要是属性名称中还包括连字符(-),需要转成驼峰命名方式,但要是在CSS中运用选中器,我们需要运用连字符格局
为方才代码追加写内容
test.dataset.birthDate = '19890615';
这样我们通过JavaScript设定了data-birth-date自定义属性,在CSS样式表为p增加了一些样式,看看结果
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); }
var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); test.setAttribute('data-sex', 'male'); console.log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-birth-date')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex); //male
HTML5的data-*自定义属性有哪些
H5中怎样猎取和设定自定义属性
JavaScript自定义属性和办法的对象模型代码详解
以上就是HTML5 data-* 自定义属性实例分享的细致内容,更多请关注 百分百源码网 其它相干文章!