Can't declare top in js

user_17743647 0
Viewed 61

I am using following code to quickly assign window.getComputedStyle to a 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 it does work with left.

What am I missing?

Thanks.

css html javascript
2 Answers

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();
user_15264060

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.

user_116438520
Related