entonces tengo un archivo html simple que consiste en un div; y un archivo css que tiene un estilo simple para el div mencionado:
html:
<html> <head> <title>Simple Movement</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="index.js"></script> </head> <body> <div id="square"></div> </body> </html>CSS:
body { margin: 0; } #square { width: 100px; height: 100px; border: 1px solid #095057; background-color: #20979e; position: absolute; left: 200px; top: 200px; }en mi archivo js hago un registro simple de la siguiente manera:
console.log(document.getElementById('square').style.top)pero recibo un error:
Uncaught TypeError: Cannot read properties of null (reading 'style') at index.js:1
No tengo idea de por qué dice que el estilo es nulo. ¿Y tú?
No tengo idea de por qué dice que el estilo es nulo. ¿Y tú?
no lo hace Dice document.getElementById('square') devuelve null , por lo que está leyendo el style de propiedad en null , lo que da como resultado el error.
Eso sucede porque su script se carga (y ejecuta) en la cabeza. En este punto, el elemento con el ID "cuadrado" aún no existe en el DOM.
Mueva su secuencia de comandos debajo de su elemento (vea el fragmento) o márquela con un async defer como este: <script src="index.js" async defer></script> para que se cargue y ejecute después de que se realice el análisis DOM.
Además, acceder style solo mostrará estilos en línea desde el atributo de estilo, por lo que no obtendrá valores de su archivo de hoja de estilo (o hojas de estilo en línea).
Utilice computedStyleMap() (consulte https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap ) para obtener los estilos computados reales, incluidas todas las hojas de estilo.
body { margin: 0; } #square { width: 100px; height: 100px; border: 1px solid #095057; background-color: #20979e; position: absolute; left: 200px; top: 200px; } <html> <head> <title>Simple Movement</title> <meta charset="UTF-8"> </head> <body> <div id="square"></div> <script> console.log(document.getElementById('square').computedStyleMap().get('top').value); </script> </body> </html>