Javascript 如何从下拉菜单更改DIV的背景色？_Javascript_Html_Css

Javascript 如何从下拉菜单更改DIV的背景色？

javascript html css

Javascript 如何从下拉菜单更改DIV的背景色？,javascript,html,css,Javascript,Html,Css,是否可以根据最终用户从下拉列表中的选择更改DIV的背景色？例如，我有一个下拉菜单，有蓝色、绿色、红色等选项，我希望DIV的背景颜色是用户选择的任何颜色。以下是我尝试过的，但我不知道如何让它工作： <head> <style> div.results{ position: relative; left: 300px; height: 200px; width: 200px; border: 1px solid; color: black;

是否可以根据最终用户从下拉列表中的选择更改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>


分区结果{
位置：相对位置；
左：300px；
高度：200px；
宽度：200px；
边框：1px实心；
颜色：黑色；
}
//此脚本将放置背景图像。
函数selectBackground（）{
var e=document.getElementById（“选择器”）；
var BackgroundValue=e.options[e.selectedIndex].value；
document.getElementById（“PreviewResults”）.style.background color=BackgroundValue；
}
选择背景
蓝色
黄色的
绿色
红色
预览结果
结果在这里

确保使用

style.backgroundColor

实际设置背景：

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

您可能还想考虑将默认选项的值设置为<代码>透明/>代码（背景的初始值），以便用户在作出更改后可以切换回：

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


选择背景
蓝色
黄色的
绿色
红色

您可以在下面进行演示：

确保使用

style.backgroundColor

实际设置背景：

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

您可能还想考虑将默认选项的值设置为<代码>透明/>代码（背景的初始值），以便用户在作出更改后可以切换回：

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


选择背景
蓝色
黄色的
绿色
红色

您可以在下面进行演示：

这不起作用，因为您在这里使用的是JavaScript中的减法操作，因为

是该操作的运算符

要访问包含

的任何样式属性，您需要删除

并用大写字母替换以下字母：

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

或者使用方括号语法：

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