如何通过DOM .style属性传入数组值设置元素height高度

问题原因 #

CSS 长度类属性（比如height、width）必须携带单位才会生效，你当前仅向height传入了纯整数值，浏览器无法识别该值对应的长度单位，因此高度设置不生效。你之前修改宽度、颜色等属性可以正常生效，是因为颜色属性本身不需要单位，修改宽度时你应该主动添加了单位，所以没有触发该问题。

解决方法 #

给拼接的随机值末尾加上像素单位px即可，同时可以优化冗余的DOM查询操作：你已经在循环中拿到了刚创建的div实例，不需要每次都调用querySelectorAll重新查找所有bar元素，直接操作当前div的style属性即可。
修改后的核心代码如下：

let bars = [];
let arr_length = 10;
const sortArea = document.querySelector(".sort-area");

for (let i = 0; i < arr_length; i++) {
  // height of bars
  const barHeight = Math.floor(Math.random() * 101);
  bars.push(barHeight);
  const div = document.createElement("div");
  div.classList.add("bar-style");
  // 直接给当前创建的div设置高度，追加px单位
  div.style.height = `${barHeight}px`;
  sortArea.append(div);
}

验证说明 #

修改后刷新页面即可看到条形高度随随机值正常变化，原有的宽度、颜色修改逻辑不受影响。

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