在<div>原版 JS 中向容器添加样式

Question

在尝试使用VanillaJS向div容器添加样式时，我发现-CCD_ 1与CCD_。有人能向我解释一下为什么会这样吗？

这是我的代码-

function changeColor(value) {
var color = document.body.style.backgroundColor;
const containerDiv = document.querySelector(".container");
switch (value) {
case "b":
color = "#00008B";
break;
case "r":
color = "#8B0000";
break;
case "g":
color = "#00ff00";
break;
default:
color = "#000";
}
containerDiv.style.backgroundColor = color;
}
changeColor();

Answer 1

containerDiv是包含.container元素的变量(常量(。

document.body.containerDiv未定义，因为containerDiv不是document.body对象的一部分。

function changeColor(value) {
var color = document.body.style.backgroundColor;
const containerDiv = document.querySelector(".container");
switch (value) {
case "b":
color = "#00008B";
break;
case "r":
color = "#8B0000";
break;
case "g":
color = "#00ff00";
break;
default:
color = "#000";
}
containerDiv.style.backgroundColor = color;
console.log("document.body.containerDiv = ", document.body.containerDiv);
console.log("containerDiv = ", containerDiv);
}
changeColor();

.container
{
width: 10em;
height: 10em;
}

<div class="container"></div>