我想使用一个下拉菜单，它将使用JavaScript更改文档的bgColor

Question

我正在寻找使用一个开关和一个数组来使用javascript和html更改文档的bgColor。

这是我的代码：

function changebg() {

    var colors = ["red", "blue", "pink", "orange", "yellow", "green"];
    x = document.bgColor
    y = document.getElementById("selection").value;

    switch (y) {

        case "red":
            x = colors[0];
            break;

        case "blue":
            x = colors[1];
            break;

        case "pink":
            x = colors[2];
            break;

        case "orange":
            x = colors[3];
            break;

        case "yellow":
            x = colors[4];
            break;

        case "green":
            x = colors[5];
            break;

    }

}

document.bgColor = changebg();

不知道从这里去哪里，有什么建议吗？

Answer 1

我有一个JSFiddle为您服务。 这是您要找的东西吗？

您只需要添加此document.body.style.backgroundColor = x; 发挥作用

您可以删除开关，而仅使用select元素中的值。 这将是更清洁的方式。

Answer 2

在changebg()的末尾return x 。

Answer 3

对于初学者，您可以尝试以下操作：

 document.getElementById("selection").addEventListener("change",function(){ document.body.style.backgroundColor=this.value; },false); 

 <select size="1" id="selection"> <option value="">Select a color</option> <option value="red">Red</option> <option value="blue">Blue</option> <select> 

要点：

• 在<option>使用value属性；
• 使用document.body.style 。 backgroundColor （或document.body.className / document.body.classList ）代替document.bgColor 。