javascript - Internet Explorer 中的 element.dataset

Question

我需要一种列出data-*元素属性的方法。我会使用Object.keys(element.dataset)，但 IE 9.0 不dataset支持。我应该如何以适用于 IE 9.0（和 Chrome、Firefox、Safari）的方式执行此操作？

Answer 1

element.attributes会给你一个NamedNodeList元素的所有属性。
只需检查属性名称是否以data-

var attributes = element.attributes,
    i = attributes.length;

for (; i--; ){
    if (/^data-.*/.test(attributes[i].name)) {
        console.log(attributes[i].name);
    }
}

​<a href="http://jsfiddle.net/Fv6MM/">示例

Answer 2

如果使用 jQuery，可以通过 $.data() 方法访问 data-* 属性：http: //api.jquery.com/data/

Answer 3

我需要这个，但也需要访问密钥，所以我根据 Andreas 给出的解决方案编写了一个函数：

Element.prototype.dataset_simulated = function(){
  var attributes = this.attributes;
  var simulatedDataset = {};

  for (var i = attributes.length; i--; ){
    if (/^data-.*/.test(attributes[i].name)) {
      var key = attributes[i].name.replace('data-', '');
      var value = this.getAttribute(attributes[i].name);
      simulatedDataset[key] = value;
    }
  }
  return simulatedDataset;
};

并使用它，而不是做element.dataset，你做element.dataset_simulated()。

这是小提琴

编辑：

看来 IE<8 也不支持Element.prototype，所以这可以简单地是一个函数，其用法如下dataset_simulated(elem)：

function dataset_simulated(elem){
  var attributes = elem.attributes;
  var simulatedDataset = {};

  for (var i = attributes.length; i--; ){
    if (/^data-.*/.test(attributes[i].name)) {
      var key = attributes[i].name.replace('data-', '');
      var value = elem.getAttribute(attributes[i].name);
      simulatedDataset[key] = value;
    }
  }
  return simulatedDataset;
};

Answer 4

您也可以尝试以下方法：

[dom_element].getAttribute('[your data-* attribute name]');