百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5data-*自定义属性实例分享-
分享文章到:

HTML5data-*自定义属性实例分享-

发布时间:08/01 来源:未知 浏览: 关键词:
本文主要介绍了详解HTML5data-*自定义属性的相干材料,小编觉得挺不错的,此刻分享给大家,也给大家做个参照 。一起追随小编过来看看吧,但愿能帮忙到大家。 本文主要介绍了详解HTML5 data-* 自定义属性的相干材料,小编觉得挺不错的,此刻分享给大家,也给大家做个参照 。一起追随小编过来看看吧,但愿能帮忙到大家。

在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-* 自定义属性实例分享的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板