Vue中动态创建div设置背景色报Cannot set property 'background' of undefined如何解决

错误原因 #

• document.querySelectorAll()返回的是类数组的NodeList节点集合，而非单个DOM节点，集合本身不存在style属性，因此访问leaf.style返回undefined，对其background赋值就会触发你遇到的报错。
• 逻辑顺序错误：你在将新创建的leaf节点插入DOM前就执行了节点查询，此时查询结果中根本不包含刚创建的节点，就算你遍历NodeList也无法给新节点设置样式。
• 额外样式问题：你style中写的.parent-branch是类选择器，但父容器用的是id="parent-branch"，对应样式不会生效。

修复方案 #

你完全不需要额外查询DOM，刚创建的leaf节点实例已经存在于div变量中，直接给它设置样式即可，修改后的addLeaf方法如下：

addLeaf() {
  // 如果需要每个leaf颜色不同，可在这里重新生成随机色
  this.mycolor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
  var div = document.createElement('div');
  div.className = 'leaf'
  // 直接给新创建的节点设置背景色，不需要额外查询DOM
  div.style.background = this.mycolor;
  // 可补充leaf的宽高等样式，否则无内容可能看不到节点
  div.style.width = '100px';
  div.style.height = '50px';
  var container = document.getElementById('parent-branch');
  container.appendChild(div)
}

如果需要给所有已存在的leaf节点也同步更新颜色，可以遍历NodeList设置：

var leafList = document.querySelectorAll('.leaf');
leafList.forEach(leaf => {
  leaf.style.background = this.mycolor;
})

如果要让父容器的样式生效，把style里的.parent-branch改成#parent-branch即可。

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