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>

你可以newer file systems并在下面演示：

see an example of this in action here

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 个答案: