兼容版的element.dataset

1. data 与 dataset的定义与使用

data-* 属性是 HTML5 中的新属性, 我们可以使用data-前缀设置需要的自定义属性,来存储页面或应用程序的私有自定义数据,

我们可以使用dataset属性(对象)访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集

例子:

张三

可以通过以下方式获取

var ele = document.getElementById('student');  
var age = ele.dataset.age; // "12"

注意语法规则,属性名称 data-abc-def 与键值 abcDef 相对应

2.兼容性

所有主流浏览器都支持 data-* 属性,部分浏览器支持dataset

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset

https://caniuse.com/#feat=dataset

兼容版的element.dataset_第1张图片

3.兼容方案

function dataset(element){
    var obj={};
    if(element.dataset){
        return element.dataset;
    }else{
        for(var i=0;i

参考:

https://www.zhangxinxu.com/wordpress/2011/06/html5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E5%AF%B9%E8%B1%A1dataset%E7%AE%80%E4%BB%8B/

https://blog.csdn.net/qq_21794603/article/details/72732150?utm_source=blogxgwz0

https://blog.csdn.net/qq_33745501/article/details/79647469

你可能感兴趣的:(JavaScript)