如何解决 CSS2Properties 在 Firefox 上没有针对“0”错误的索引属性设置器？答案

【问题标题】：How to solve CSS2Properties doesn't have an indexed property setter for '0' error on Firefox?如何解决 CSS2Properties 在 Firefox 上没有针对“0”错误的索引属性设置器？
【发布时间】：2017-09-06 13:59:51
【问题描述】：

我正在通过 Javascript 创建一个 div 元素，并且我想复制由我正在使用的游戏引擎初始化的画布的样式。我使用 Object.assign 来实现这一点，它在 Chrome 上运行良好，但是当我在 Firefox 上测试时，我得到了这个错误，它不允许我继续我的游戏。我将功能代码留在下面：

export const addCanvasOverlay = (id) => {
  const canvas = game.system.canvas;
  const overlay = document.createElement('DIV');
  overlay.id = id;
  /**
   * Clone canvas style to ensure the overlay is always over it
   */
  const trackCanvasSize = () => {
    Object.assign(overlay.style, canvas.style);
    overlay.style['pointer-events'] = 'none';
  };
  window.addEventListener('resize', trackCanvasSize);
  trackCanvasSize();
  canvas.parentNode.appendChild(overlay);
  return overlay;
}

有人知道是什么原因造成的吗？

这是我在 canvas.style 上得到的除了样式正常属性之外的内容：

【问题讨论】：

这一切都取决于 canvas.style ... 看起来它有一个属性“0”？您可以尝试迭代其所有属性并逐个添加它们，并使用 console.log 来了解添加了哪个属性。这将帮助您找出导致崩溃的属性。
@Salketer 我在该对象上添加了 Firefox 检查器的屏幕截图。它显示了所有正常的 CSS 属性以及图像中显示的编号属性。你知道为什么会这样吗？
我找不到任何关于此的规范...不确定 Firefox 是对还是错。似乎您必须研究一种机制来仅继承正确的属性...您可以遍历每个可枚举，并测试它是否为 int，如果是，请不要将其放入新样式中。跨度>
问题似乎是 chrome 将数字索引定义为 nun-enumerable 并将普通键（css 样式属性）定义为可枚举。 Firefox 恰恰相反：“0”是可枚举的。而“宽度”不是。在 W3 规范中找不到任何关于它的信息。

标签： javascript css firefox ecmascript-6

【解决方案1】：

最后我解决了这个问题，我不得不检查样式对象的构造函数并在 Firefox 上再做一步：

let styles = {};
switch (canvas.style.constructor.name) {
      // Fix for firefox
      case 'CSS2Properties':
        Object.values(canvas.style).forEach((prop) => {
          styles[prop] = canvas.style[prop];
        });
        break;
      case 'CSSStyleDeclaration':
        styles = canvas.style;
        break;
      default:
        console.error('Unknown style object prototype');
        break;
    }
Object.assign(overlay.style, styles);

【讨论】：