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

Change Background Color of Webpage Using Javascript

本文关键字：背景 颜色 网页 javascript 使用      更新时间：2023-09-26

我是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>

单击链接时没有任何反应

只要元素的 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>

爪哇语

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/

你可以试试这个（例子）

.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;
    };
};
相关文章：