Estoy tratando de obtener todos los divs dentro de un div con document.querySelectorAll. Curiosamente, cuando configuro en el JS la altura a 1000, el desplazamiento del explorador se agranda en consecuencia (solo que el globo no se hace más grande). ¿Qué estoy haciendo mal?
'use strict'; var gElBalloons; function init() { gElBalloons = document.querySelectorAll('.balloons'); setInterval(moveBalloons, 1000); } function moveBalloons() { for (var i = 0; i < gElBalloons.length; i++) { gElBalloons[i].style.height = 1000 + 'px'; } } body { margin: 10%; } .balloon-1 { display: block; width: 120px; height: 145px; background-color: red; border-radius: 80%; position: absolute; } .balloon-2 { display: block; width: 120px; height: 145px; background-color: blue; border-radius: 80%; left: 40%; position: absolute; } <!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>Balloons</title> <link rel="stylesheet" href="./css/main.css" /> </head> <body onload="init()"> <div class="balloons"> <div class="balloon-1"></div> <div class="balloon-2"></div> </div> <script src="./js/main.js"></script> </body> </html>Por ahora, solo quiero probar y asegurarme de que funciona correctamente.
Parece que su selector seleccionó el div incorrecto. Si desea agrandar la bola, debe seleccionar balloon-1 y balloon-2 en lugar de sus contenedores balloons .
'use strict'; var gElBalloons; function init() { gElBalloons = document.querySelectorAll('.balloons > div'); setInterval(moveBalloons, 1000); } function moveBalloons() { for (var i = 0; i < gElBalloons.length; i++) { gElBalloons[i].style.height = 1000 + 'px'; } } body { margin: 10%; } .balloon-1 { display: block; width: 120px; height: 145px; background-color: red; border-radius: 80%; position: absolute; } .balloon-2 { display: block; width: 120px; height: 145px; background-color: blue; border-radius: 80%; left: 40%; position: absolute; } <!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>Balloons</title> </head> <body onload="init()"> <div class="balloons"> <div class="balloon-1"></div> <div class="balloon-2"></div> </div> </body> </html>