javascript - element.dataset in Internet Explorer - Stack Overflow

admin管理员组

文章数量:1290978

I need a way to list the data-* attributes of an element. I would use Object.keys(element.dataset) but IE 9.0 doesn't have dataset support. How should I do this in a way that works for IE 9.0 (and Chrome, Firefox, Safari)?

I need a way to list the data-* attributes of an element. I would use Object.keys(element.dataset) but IE 9.0 doesn't have dataset support. How should I do this in a way that works for IE 9.0 (and Chrome, Firefox, Safari)?

• javascript
• html
• internet-explorer
• dom

Share Improve this question Follow edited Dec 21, 2015 at 12:43 smonff 3,49733 gold badges3939 silver badges4848 bronze badges asked Sep 9, 2012 at 16:42 ForbesLindesayForbesLindesay 10.7k33 gold badges5252 silver badges7676 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

element.attributes will give you a NamedNodeList with all attributes of the element.
Just check the attribute names if they start with data-

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

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

​Example

If you are using jQuery, you can access data-* attributes through $.data() method: http://api.jquery./data/

I needed this but also needed access to the keys, so I wrote a function based on the solution given by 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;
};

And to use it, instead of doing element.dataset, you do element.dataset_simulated().

and here's the fiddle

Edit:

It appears that IE<8 also has no support for Element.prototype, so this can simply be a function with usage like 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;
};

You could also try the following method:

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

本文标签： javascriptelementdataset in Internet ExplorerStack Overflow