CSS Styles from a select box

Hello, I'm trying to setup a form so that the CSS styles can be chosen from select boxes. I want to have a font-family select box so that when an option is selected, the CSS in the page changes to that style. I would like to change the color, background-color, font-size and font-family this way.

I tried a simple bit of code but it doesn't work and I'm not that good with javascript to understand why, can anyone help?

function ChangeBodyBGColor()
{
document.body.style.background-color=document.success.bgcolor.options[document.success.bgcolor.selectedIndex].value
}

<select id="bgcolour" name="bgcolour" onchange="ChangeBodyBGColor()">
<option value="#FFFFFF" selected="selected">White</option>
<option value="#000000">Black</option>   
<option value="#A0A0A0">Light Grey</option>   
<option value="#808080">Mid Grey</option>   
<option value="#404040">Dark Grey</option>   
<option value="#FF0000">Red</option>   
<option value="#00FF00">Green</option>   
<option value="#0000FF">Blue</option>   
<option value="#FF00FF">Magenta</option>   
<option value="#00FFFF">Cyan</option>   
<option value="#FFFF00">Yellow</option>   
<option value="#880000">Dark Red</option>   
<option value="#008800">Dark Green</option>   
<option value="#000088">Dark Blue</option>   
<option value="#880088">Dark Magenta</option>   
<option value="#008888">Dark Cyan</option>   
<option value="#888800">Dark Yellow</option>   
</select> </pre>