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>What am I missing?
Thanks.
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();
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.