javascript - 数据属性未添加到创建的元素

Question

我创建了一个新的 div 元素，我想向其中添加一些数据属性，因此我设置了以下代码：

vjs.LikeButton = vjs.Button.extend({
  /** @constructor */
  init: function(player, options){
    vjs.Button.call(this, player, options);
  }
});

vjs.LikeButton.prototype.createEl = function(){
    return vjs.Button.prototype.createEl.call(this, 'div', {
        'id': 'video-fb-like',
        'className': 'fb-like',
        'innerHTML': '',
        'data-send': "false",
        'data-layout': "box_count",
        'data-width': "55",
        'data-show-faces': "false",
        'data-colorscheme': "dark",
        'data-href': this.player().options().shareUrl
  });
};

然而，问题是元素获得了新的类和 id，但没有添加数据属性。谁能告诉我为什么会这样？

Answer 1

这是因为 video.js 设置属性的方式：

el[propName] = properties[propName];

data在支持它们的浏览器中不能以这种方式设置属性。所以你必须自己做，例如

var button = vjs.Button.prototype.createEl.call(...
button.setAttribute('data-send', 'false');

Answer 2

IE浏览器有这个问题吗？由于数据属性仅在html5中支持，您可能需要检查浏览器的兼容性。