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

我是Javascript的新手，所以我正在努力解决如何做到这一点。当用户单击这三个按钮中的一个时，我必须更改网页的背景色。这是我的HTML代码

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

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

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

并将我的html更改为

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

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

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

---

单击链接时不会发生任何情况

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

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

类似这样的东西。

Html

<ul id="colors">
    <li id="yellow">yello</li>
    <li id="orange">orange</li>
    <li id="red">red</li>
</ul>

这很有效

你可以试试这个（）

HTML:

<ul id="colorSet">
    <li>Yellow</li>
    <li>Orange</li>
    <li>Red</li>
</ul>

window.onload = function(){
    var ul = document.getElementById('colorSet');
    ul.onclick = function(e){
        var evt = e || window.event;
        var target = evt.target || evt.srcElement;
        document.body.style.backgroundColor = target.innerHTML;
    };
};

---

先让我们看看你的尝试。

<ul id="colorSet">
    <li>Yellow</li>
    <li>Orange</li>
    <li>Red</li>
</ul>

window.onload = function(){
    var ul = document.getElementById('colorSet');
    ul.onclick = function(e){
        var evt = e || window.event;
        var target = evt.target || evt.srcElement;
        document.body.style.backgroundColor = target.innerHTML;
    };
};