javascript - 如何解决CSS2Properties在Firefox上没有针对“0”错误的索引属性 setter ？

我正在通过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上得到的，除了样式常规属性：

最佳答案

最后，我解决了这一问题，我不得不检查样式对象的构造方法，并在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);

关于javascript - 如何解决CSS2Properties在Firefox上没有针对“0”错误的索引属性 setter ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46077237/