Changing background-color of an element in CSS using Javascript
css, javascript
Solution
Done: http://jsfiddle.net/iambriansreed/zmtU4/
Updated to be Non-jQuery.
HTML
<div id="box"></div><div id="box"></div>
<button type="button" onclick="button_click('red');">Red</button>
<button type="button" onclick="button_click('blue');">Blue</button>
<button type="button" onclick="button_click('green');">Green</button>
<button type="button" onclick="button_click('yellow');">Yellow</button>
<button type="button" onclick="button_click('purple');">Purple</button>
Pure JavaScript
function button_click(color){
document.getElementById("box").style.backgroundColor=color;
}
Problem
Basically I want to change the background color of an element in CSS using JavaScript at the click of a button. So far my CSS looks something like this: ``` div.box { width:100px; height:100px; background-color:#FF2400; } ``` It needs to change dynamically to a choice of several colors, just with multiple buttons will do (Each being a different color).