网页制作

详解HTML5 data-* 自定义属性
网页制作 2024/12/23 佚名
3 2

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

读写方式

data-*有两种设置方式，可以直接在HTML元素标签上书写

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

其中的data-age就是一种自定义属性，当然我们也可以通过JavaScript来对其进行操作，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合

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

这样就为div添加了一个data-my的自定义属性，使用JavaScript操作dataset有两个需要注意的地方

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

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

为刚才代码追加写内容

<style type="text/css">
        [data-birth-date]
        {
            background-color: #0f0;
            width:100px;
            margin:20px;
        }
    </style>
test.dataset.birthDate = '19890615';

这样我们通过JavaScript设置了data-birth-date自定义属性，在CSS样式表为div添加了一些样式，看看效果

详解HTML5 data-* 自定义属性

详解HTML5 data-* 自定义属性

读取的时候也是通过dataset对象，使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名

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);
        }

详解HTML5 data-* 自定义属性

getAttribute/setAttribute

有些同学可能会问这和getAttribute/setAttribute除了命名有什么区别吗，我们来看一下

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-* 自定义属性

详解HTML5 data-* 自定义属性

这样我们可以看出，两者都把属性设置到了attribute上（废话，要不人家能叫自定义属性），也就是说getAttribute/setAttribute可以操作所有的dataset内容，dataset内容只是attribute的一个子集，特殊就特殊在命名上了，但是dataset内只有带有data-前缀的属性（没有age=25那个）。

那么为什么我们还要用data-*呢，一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便，而不至于零零散散了，所以用用还是不错的。

浏览器兼容性

比较不好的消息就是data-*的浏览器兼容性情况十分不乐观

  1. Internet Explorer 11+
  2. Chrome 8+
  3. Firefox 6.0+
  4. Opera 11.10+
  5. Safari 6+

其中IE11+简直就是亮瞎小伙伴的眼，看来要想全面使用此属性路漫漫其修远矣

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
data自定义属性,html自定义属性
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“详解HTML5 data-* 自定义属性”

暂无“详解HTML5 data-* 自定义属性”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com