data属性

关注我不迷路

于 2019-06-23 21:10:15 发布

阅读量513

点赞数

文章标签： data

本文链接：https://blog.youkuaiyun.com/weixin_44264878/article/details/93408081

版权

博客介绍了自定义属性data-*，其作用是进行数据缓存。还说明了获取自定义属性的两种方式，即jquery方式通过对象.data获取，h5方式通过对象.dataset获取。同时提到自定义属性写法采用驼峰命名法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义属性: data-*(属性名)
* 作用: 进行数据的缓存
* 获取:
* jquery方式对象.data(“自定义属性名称–>data-username”)
* h5的方式对象.dataset 返回的是属性的集合
* 自定义属性的写法: data-name --> 对象.name data-age-id -->对象.ageId 使用驼峰命名法

<div class="box" data-username="小明" data-age-id="20">111</div>

获取

 var box = document.querySelector("div");
    //获取
    console.log(box.dataset.ageId);
    console.log(box.dataset['username']);//h5
    console.log($(box).data().username);//jquery

设置

 //设置
    box.dataset.ageId = "40";
    console.log(box.dataset.ageId);
    $(box).data('password','123456')
    console.log($(box).data("username"));
    console.log($(box).attr("data-username"));
    console.log($(box).data().username);//jquery