使用节点列表改变页面的背景颜色

Question

我正在尝试创建两个函数，当输入框（颜色选择器）的值发生更改时，它们将更改我的 HTML 页面的背景颜色。

这是我的 JavaScript：

function backgroundColor() {
  let bod = document.getElementsByTagName("body")[0];
  let bgc = document.getElementById('bgColor');

  bgc.addEventListener("change", function(){
    color(bod, bgColor.value);
  });
}

function color(node, color){
  for (let n of node){
    n.style.backgroundColor = color;
  }
}

和 HTML：

<p>Background Color: <input type="color" id="bgColor" value="#FFFFFF"/></p>

我不确定如何格式化，如果不清楚，请见谅！

Answer 1

addEventListener 回调有一个事件参数，其中包含输入值，因此 function 应该是这样的

 bgc.addEventListener("change", function(event){
    bod.style.backgroundColor  = event.target.value;
  });

不需要循环。

Answer 2

你有很多不同的事情出错了。

• 对bgColor.value的引用应该是bgc.value 。
• 你永远不会调用backgroundColor()所以你的听众永远不会被添加。
• 您将单个节点传递给color()但然后尝试使用for()调用对其进行迭代。
• 您正在使用getElementsByTagName()这没有错，但除非您需要对HTMLCollection提供的元素的实时引用，否则您应该坚持使用querySelector或getElementById ，它们都返回单个HTMLElement或querySelectorAll返回 static NodeList

 function backgroundColor() { let bod = document.querySelector('body'); let bgc = document.getElementById('bgColor'); bgc.addEventListener("change", function(){ color(bod, bgc.value); }); } function color(node, color){ node.style.backgroundColor = color; } backgroundColor()

 <p>Background Color: <input type="color" id="bgColor" value="#FFFFFF"/></p>

Answer 3

这种方式（与 css 变量）

 document.getElementById('bt-color').addEventListener('change',function() { document.body.style.setProperty('--vColor', this.value) })

 body { --vColor: #ffffff; background-color: var(--vColor); }

 <input type="color" id="bt-color" value="#ffffff">