Как изменить цвет фона DIV в выпадающем меню?

Можно ли изменить цвет фона DIV на основе выбора конечного пользователя из выпадающего списка? Например, у меня есть раскрывающееся меню с параметрами синего, зеленого, красного и т. Д., И я бы хотел, чтобы цвет фона 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>

источник

2016-04-10 kevinw18

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

Это не работает, потому что у вас здесь будет операция вычитанием в JavaScript, потому что - оператор для этого.

Чтобы получить доступ к любым свойству стиля, которые содержат - вам необходимо либо удалить - и заменить следующее письмо с заглавной версией:

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

или использовать синтаксис квадратных скобок:

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

источник

2016-04-10 03:29:32 CBroe

Это работало отлично! Спасибо за объяснение. – kevinw18

Убедитесь, что вы используете style.backgroundColor на самом деле установить свой фон:

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

Вы можете также рассмотреть вопрос о создании значение вашего варианта по умолчанию для transparent (начальное значение для фона), так что пользователь может переключиться обратно после того, как изменение было сделано:

Вы можете see an example of this in action here и показано ниже:

источник

2016-04-10 03:29:23

Изменить строку

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

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

источник

2016-04-10 03:31:55

Как изменить цвет фона DIV в выпадающем меню?

ответ

Смежные вопросы