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;
    })
});

像这样的小提琴。

Answer 2

html

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

Javascript

var colors = document.getElementById('colors');

colors.addEventListener('click', function(e) {
    var el = e.target,
       color = el.id;

    document.documentElement.style.backgroundColor = color;
});

那行得通... http://jsfiddle.net/Ayh3q/

Answer 3

你可以试试这个（例子）

HTML：

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

JS：

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;
    };
};