我想使用一個下拉菜單，它將使用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 。