1、说明:点击了解更多HTML全局属性
data-* 是HTML5的新属性,用于储存页面或应用程序的私有自定义数据,平时我们往元素中储存数据都是放到元素的value中,放到value中的数据用户可以看到,如果不想让用户看到还要将元素隐藏,但是如果我们不能将元素隐藏并且value中有需要存放的值,那么我们还想额外储存一些不想让用户看到,并且对我们的一些判断或操作起到非常关键作用的数据的时候(与渲染无关的信息),data-* 就可以发挥它的作用了,我们可以将一些我们用到的数据自定义的封装到某一个元素中,使没一个元素和对应的数据一一对应,并可以使用JavaScript进行储存、获取、操作并加以利用,非常方便。
2、data-* 使用的注意点:
语法:<element data-* =" somevalue ">
data-*属性包括两部分:
- 属性名不应该包含任何大写字母,并且在前缀"data-"之后必须至少一个字符
- 属性值可以是任意字符串
注释:用户代理会完全忽略前缀为"data-"的自定义属性。
3、浏览器支持:(所有浏览器都支持data-*属性)
4、data-*属性的赋值和获取方法:
比如:我们创建一个input元素:
<input type="text" name="inputname" id="inputname" data-id="1" data-name-id="1" />
我们想往input元素中存放它的idd
1)getAttribute()方法:
const obj = document.getElementById('inputname');
//getAttribute()取值属性
console.log(obj.getAttribute('data-id')); //1
//setAttribute()赋值属性
obj.setAttribute("data-id","2");
console.log(obj.getAttribute('data-id')); //2
2)dataset属性:data-前缀属性可以在JS中通过dataset取值,更加方便
console.log(obj.dataset.id); //1
//data-name-id 连续取值使用驼峰命名法取值
console.log(obj.dataset.nameId); //1
//dataset()赋值
obj.dataset.id="2"; //2
//也可以使用相关的运算符
obj.dataset.nameId ++; //2
//新增data属性
obj.dataset.id2 = "1"; //1
//删除,设置成null,或者delete操作进行删除
obj.dataset.id2 = null; //null
delete obj.dataset.id2; //undefind
以上示例展示了dataset属性如何操作data-*属性,dataset属性值是一个DOMStringMap的一个示例,是一个名值对的映射。在这个映射中,每个data-name的形式的属性都有一个对应到的属性,不同的属性名中没有data-前缀。(比如,自定义属性时data-name,映射中对应的属性就是name)还有一点需要注意的是如果data-属性名中包含了连字符(比如:data-date-of-birth,则映射中对应的属性为dateOfBirth,即转换为相应的驼峰格式来显示)
dataset的兼容问题:
Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+
3)jquery data()方法:该部分参考文章
//data方法取值
$("#inputname").data("id"); //1
//data方法赋值
$("#inputname").data("id","2"); //2
注意:假设我们声明两个data-*属性
<input name="inputname" id="inputname" data-appid="123" data-app-id="456" />
获取属性:
$("#inputname").data("appid"); //123
$("#inputname").data("app-id"); //456
属性赋值:
$("#inputname").data("appid","666"); //666
最终的HTML代码:
<input name="inputname" id="inputname" data-appid="123" data-app-id="456" />
需要注意的是,data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 " cache " 附加到了对象上,并使用了一个特殊的属性名称。
以上述代码中,虽然对元素进行了data()赋值操作,但HTML代码中div的data-appid的值仍然为123,因为data()只是修改了缓存的那个值,此时进行$("#myDiv").data(“appid”)的操作,输出的结果为666。
4)jquery attr()方法:
//attr方法取值:
$("#inputname").attr("data-id"); //1
//attr方法赋值:
$("#inputname").attr("data-id","2"); //2