javascript - 无法在js中声明top

Question

我正在使用以下代码将 window.getComputedStyle 快速分配给一个变量:

const {
  width,
  height,
  left
} = window.getComputedStyle(document.querySelector('canvas'));
console.log(width, left, height)

<canvas></canvas>

但是当我想声明top时，它返回:

Uncaught SyntaxError: Identifier top has already been declared

const {
  width,
  height,
  left,
  top
} = window.getComputedStyle(document.querySelector('canvas'));
console.log(width, left, height)

<canvas></canvas>

但我之前没有声明过它，它似乎确实适用于 left。

我错过了什么？

谢谢。

Answer 1

top是 global variable在浏览器中。这意味着它已经在您尝试定义它的上下文中定义。您可以将其命名为其他名称:

const {
  width,
  height,
  left,
  top: topStyle, // this basically renames "top" to "topStyle"
} = window.getComputedStyle(document.querySelector('canvas'));

console.log(width, left, height, topStyle)

或者将计算出的样式分配给一个变量并在那里访问它:

const canvasStyles = window.getComputedStyle(document.querySelector('canvas'));

console.log(
  canvasStyles.width,
  canvasStyles.left,
  canvasStyles.height,
  canvasStyles.top
);

或者只是不要尝试在 global scope 中定义变量.而是在函数中定义它:

function accessPosition() {
  const {
    width,
    height,
    left,
    top
  } = window.getComputedStyle(document.querySelector('canvas'));

  console.log(width, left, height, top);
}

accessPosition();