未将数据属性添加到创建的元素中

data attributes not being added to created element

本文关键字：元素 创建 数据属性 添加      更新时间：2023-09-26

我创建了一个新的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，但没有添加数据属性。有人能告诉我们为什么会这样吗？

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

el[propName] = properties[propName];

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

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

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

相关文章：