javascript - 使用 Javascript 更改网页的背景颜色

Question

我是 Javascript 的菜鸟，所以我正在为如何做到这一点而苦苦挣扎。当用户单击这三个按钮之一时，我必须更改网页的背景颜色。这是我在 HTML 中的代码。

 <li id ="yellow" ></li>

 <li id="orange" ></li>

 <li id="red" ></li>

因此，当用户点击这些链接时，网页的背景颜色需要更改为该颜色。使用 JavaScript 执行此操作的最佳方法是什么？

我试过了

function changeBGC (color) {
document.bgColor= color;
}

并将我的 html 更改为此

 <li id ="yellow" onClick="changeBGC('yellow')" ></li>

 <li id="orange" onClick="changeBGC('orange')"></li>

 <li id="red" onClick="changeBGC('red')"></li>

点击链接没有任何反应

Answer 1

只要元素的 ID 是有效的 CSS 颜色，您就可以从属性中读取它们:

Array.prototype.forEach.call(document.getElementsByTagName('li'), function (el) {
    el.addEventListener('click', function (e) {
        document.body.style.background = el.id;
    })
});

像这样的东西 fiddle .