Estoy usando el siguiente código para asignar rápidamente window.getComputedStyle a una variable:
const { width, height, left } = window.getComputedStyle(document.querySelector('canvas')); console.log(width, left, height) <canvas></canvas> Pero cuando quiero declarar top , devuelve:
SyntaxError no detectado: el identificador superior ya se ha declarado
const { width, height, left, top } = window.getComputedStyle(document.querySelector('canvas')); console.log(width, left, height) <canvas></canvas>¿Qué me estoy perdiendo?
Gracias.
top es unavariable global en el navegador. Eso significa que ya está definido en el contexto en el que está tratando de definirlo. Puede nombrarlo de otra manera:
const { width, height, left, top: topStyle, // this basically renames "top" to "topStyle" } = window.getComputedStyle(document.querySelector('canvas')); console.log(width, left, height, topStyle)O asigne el estilo calculado a una variable y acceda allí:
const canvasStyles = window.getComputedStyle(document.querySelector('canvas')); console.log( canvasStyles.width, canvasStyles.left, canvasStyles.height, canvasStyles.top );O simplemente no intente definir la variable en el alcance global . En su lugar, defínalo en una función:
function accessPosition() { const { width, height, left, top } = window.getComputedStyle(document.querySelector('canvas')); console.log(width, left, height, top); } accessPosition();si abre las herramientas de desarrollo de su navegador y escribe:
console.log(top)Verá que ya está declarado para representar la ventana superior.