Estaba haciendo una página web con un video. y quería cambiar el tamaño del video dependiendo del tamaño de la ventana.
el siguiente código es mi código HTML:
<video id="video" controls="controls" poster="images/video_poster.png" width="320" height="240"> <source src="video/Minions.mp4" type="video/mp4"> <source src="video/Minions.ogv" type="video/ogg"> </video>y mi código de script para eso está a continuación:
<script>var video = document.getElementById("video"); function changeVideoSize() { console.log("width is: ", window.innerWidth) if (window.innerWidth > 900) { video.width = "640"; video.height = "480"; } else { video.width = "320"; video.height = "240"; } } window.addEventListener("resize", changeVideoSize) function init() { } init(); </script>primero, coloco este código de secuencia de comandos al final de la etiqueta principal, y cometió un error "No se pueden establecer propiedades de nulo (estableciendo 'ancho')".
Estuve atascado con este error durante una hora... y luego, después de muchos intentos diferentes, lo puse al final de la etiqueta del cuerpo y funcionó.
¿Por qué es? ¿Cuáles son las principales diferencias entre ponerlo en la cabeza y en el cuerpo? ¿Debería poner siempre la etiqueta del script al final de la etiqueta del cuerpo? o depende de los casos?
Eso es debido a la secuencia pura. El intérprete lee de arriba hacia abajo en este caso. y si su código en la cabeza dice "Consígame el elemento X" y aún no está en el DOM, entonces eso es nulo. Es diferente en el pie de página, donde el elemento x ya está cargado en el DOM, y por eso funciona el script. JS en la mayoría de los casos siempre justo antes de la etiqueta del cuerpo de cierre.
básicamente, cuando lo coloca en su etiqueta principal, el script se analiza antes que la etiqueta corporal. por lo tanto, no hay una etiqueta de video dentro del documento con video de identificación. Use una secuencia de comandos externa con atributo diferido o coloque la secuencia de comandos debajo de su código html dentro de la etiqueta. Perdón por mi mal ingles.
Primero, el HTML se analiza de top to bottom , por lo que cualquier encuentro primero se ejecutará.
Si coloca la etiqueta de secuencia de script al final de la etiqueta head , se ejecutará primero antes del body HTML, por lo que no puede establecer el width porque cuando usó
document.getElementById("video") Devolvería null , por lo que no puede establecer propiedades en null . Porque en el momento de esta declaración el elemento no existe.
<html> <head> <script> const heading = document.querySelector("h1"); console.log(heading); // null </script> </head> <body> <h1> This is heading</h1> </body> </html> Por lo tanto, debe colocar la etiqueta del script al final de la etiqueta del body . De modo que cuando JS se analice y se ejecute, puede encontrar el elemento HTML y ejecutar las declaraciones.
<html> <head> </head> <body> <h1> This is heading</h1> <script> const heading = document.querySelector("h1"); console.log(heading); // h1 element </script> </body> </html>