Internet Explorer 中的 element.dataset答案

【问题标题】：element.dataset in Internet ExplorerInternet Explorer 中的 element.dataset
【发布时间】：2012-09-02 16:23:03
【问题描述】：

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

【问题讨论】：

标签： javascript html internet-explorer dom

【解决方案1】：

你也可以试试下面的方法：

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

【讨论】：

【解决方案2】：

我需要这个但也需要访问密钥，所以我根据 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_simulated()，而不是element.dataset。

这里是the fiddle

编辑：

IEElement.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;
};

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

element.attributes 将为您提供包含元素所有属性的NamedNodeList。
只需检查以data-开头的属性名称

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

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

Example

【讨论】：