如何從下拉菜單更改DIV的背景顏色？

Question

是否可以根據最終用戶從下拉列表中選擇的內容來更改DIV的背景顏色？ 例如，我有一個帶有藍色，綠色，紅色等選項的下拉菜單，我希望DIV背景色是用戶選擇的。 這是我嘗試過的方法，但我無法弄清楚如何使其有效：

<head>

<style>
div.results{
position: relative;
left: 300px;
    height: 200px;
    width: 200px;
    border: 1px solid;
    color: black;
}
</style>

<script>// this script will place the background image.

function selectBackground(){
    var e = document.getElementById("selector");
    var BackgroundValue = e.options[e.selectedIndex].value;
    document.getElementById("PreviewResults").style.background-color= BackgroundValue;
}
</script>

</head>

<body>

<div class="selectors">
    <select id=selector>
        <option>Select Background</option>
        <option value="blue">Blue</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
    </select>   
<button onclick="selectBackground()">Preview Results</button>
</div>

<div class="results" id="PreviewResults" style="background-color:white;">
Results Here
</div>

</body>

Answer 1

確保您使用style.backgroundColor實際設置背景：

document.getElementById("PreviewResults").style.background-color= BackgroundValue;

您可能還需要考慮將默認選項的值設置為transparent （背景的初始值），以便用戶可以在進行更改后切換回：

<select id=selector>
    <option value="transparent">Select Background</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
    <option value="red">Red</option>
</select>

您可以在這里看到一個實際的示例，並在下面進行了演示：

Answer 2

document.getElementById("PreviewResults").style.background-color= BackgroundValue;

這是行不通的，因為這里的內容將是JavaScript中的減法運算 ，因為-是該運算符。

要訪問包含-任何樣式屬性，您需要刪除-並將以下字母替換為其大寫版本：

document.getElementById("PreviewResults").style.backgroundColor = BackgroundValue;

或使用方括號語法：

document.getElementById("PreviewResults").style["background-color"] = BackgroundValue;

Answer 3

換線

document.getElementById("PreviewResults").style.background-color= BackgroundValue;

至

document.getElementById("PreviewResults").style.backgroundColor = BackgroundValue;

如何從下拉菜單更改DIV的背景顏色？

問題描述

3 個解決方案

解決方案1
1 2016-04-10 03:29:23

解決方案2
1 已采納 2016-04-10 03:29:32

解決方案3
0 2016-04-10 03:31:55

如何從下拉菜單更改DIV的背景顏色？

問題描述

3 個解決方案

解決方案1 1 2016-04-10 03:29:23

解決方案2 1 已采納 2016-04-10 03:29:32

解決方案3 0 2016-04-10 03:31:55

解決方案1
1 2016-04-10 03:29:23

解決方案2
1 已采納 2016-04-10 03:29:32

解決方案3
0 2016-04-10 03:31:55