javascript - InternetExplorerのelement.dataset

Question

data-*要素の属性を一覧表示する方法が必要です。私は使用しますObject.keys(element.dataset)が、IE9.0はdatasetサポートされていません。IE 9.0（およびChrome、Firefox、Safari）で機能する方法でこれを行うにはどうすればよいですか？

Answer 1

element.attributesNamedNodeList要素のすべての属性を含むを提供します。
属性名がで始まる場合は、属性名を確認してくださいdata-

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

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

<ahref="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]');