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。

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

您可以尝试此操作（Example）

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

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

3 个答案: