I am using following code to quickly assign window.getComputedStyle to variable

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

<canvas></canvas>

But when I want to declare top, it returns 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>

But I haven't declared it before??? and It seems that works with left?

What am I missing?

Thanks.

CodePudding user response：

top is a global variable in the browser. That means it's already defined in the context you're trying to define it in. You can name it something else:

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

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

Or assign the computed style to a variable and access it there:

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

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

Or just don't try to define the variable in the global scope. Instead define it in a function:

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

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

accessPosition();

CodePudding user response：

if you open your browser's developer tools and type:

console.log(top)

You will see it's already declared to represent the top-most window.