Quiero hacer que el elemento de la cuadrícula caiga a la página. Usé setInterval para repetir el proceso (la parte inferior disminuirá para que la cuadrícula descienda). Creo que no creé la función move () correctamente. Solo quiero saber cómo puedo configurar la función correctamente.
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel= "stylesheet" href ="style.css"></link> </head> <body> <div class="grid"></div> <script src="javascript.js" ></script> </body> </html> .grid { background-color:blue; height: 20px; width :100px; left:600px; top:150px; position : absolute; } var grid =document.querySelector('.grid'); function move () { grid.style.bottom-=4; grid.style.bottom=grid.bottom +'px'; } move(); setInterval(move,30);Si aún desea implementar su enfoque para realizar este movimiento, aquí hay algunos comentarios.
Si desea manipular el valor inferior de un elemento, primero debe analizar el valor numérico, luego cambiarlo y luego agregar un 'px' (o cualquier unidad que esté usando).
// grid.style.bottom-=4; // subtraction on strings is not allowed // instead, use: const currentBottom = parseInt(grid.style.bottom, 10) grid.style.bottom = (currentBottom - 4) + 'px'<style> bloques y hojas de estiloSi desea obtener todos los estilos actuales de un elemento DOM, debe usar window.getComputedStyle . Como se describe en los documentos:
getComputedStyle es de solo lectura y debe usarse para inspeccionar el estilo del elemento, incluidos los establecidos por un elemento o una hoja de estilo externa
En el fragmento a continuación, puede ver y comparar los valores grid.style.bottom y window.getComputedStyle(grid) . Al principio, la primera versión está vacía, pero la segunda tiene el valor esperado de la hoja de estilo.
Alternativamente, puede aplicar directamente el estilo en línea con el elemento HTML. Entonces también podría usar .style para acceder al valor correcto desde el principio.
<div class="grid" style="bottom: 100px"></div>Consulte la versión corregida del fragmento a continuación con un retraso de 3 segundos para una mejor comprensión.
var grid = document.querySelector('.grid'); function move() { const style = grid.style.bottom const computedStyle = window.getComputedStyle(grid) console.log('bottom', style) console.log('bottom from computed style', computedStyle.bottom) // grid.style.bottom -= 4; // grid.style.bottom = grid.bottom + 'px'; const newBottom = parseInt(computedStyle.bottom, 10) - 4; // parseInt only reads the numeric value from the bottom string grid.style.bottom = newBottom + 'px'; } move(); setInterval(move, 3000); .grid { background-color: blue; height: 20px; width: 100px; left: 100px; bottom: 200px; position: absolute; } <div class="grid"></div>Te recomendaría usar una animación CSS para eso, no necesitas JavaScript para eso.
.grid { background-color: blue; height: 20px; width: 100px; left: 100px; position: absolute; animation: move 1.5s forwards; } @keyframes move { from { bottom: 200px; } to { bottom: 0; } } <body> <div class="grid"></div> </body>