使用document.querySelectorAll修改元素高度不生效，仅页面滚动条变化

问题原因 #

• 选择器匹配错误：你代码中document.querySelectorAll('.balloons')获取的是类名为balloons的外层父容器，而非它内部的两个气球子元素，你修改的是父容器的高度，自然不会改变内部气球的尺寸。
• 定位规则影响：两个气球元素都设置了position: absolute，已经脱离了正常文档流，父容器的高度变化本身也不会对它们的尺寸产生作用，必须直接选中气球元素修改样式才能生效。

修正方案 #

调整JS代码的元素选择器，直接选中所有气球元素即可，修改后的参考代码如下：

'use strict';

var gElBalloons;

function init() {
  // 调整选择器，匹配balloons容器下的所有子div，也就是两个气球元素
  gElBalloons = document.querySelectorAll('.balloons > div');
  setInterval(moveBalloons, 1000);
}

function moveBalloons() {
  for (var i = 0; i < gElBalloons.length; i++) {
    // 行内样式优先级高于CSS中定义的固定height，会覆盖生效
    gElBalloons[i].style.height = 1000 + 'px';
  }
}

修改后运行代码，两个气球的高度就会被改成1000px，功能即可正常验证。

内容的提问来源于stack exchange，提问作者troubledcoder