Editable font size/color/typeface


im currently designing a website to go along with university dissertation.

i need to give the user of the site the ability to change the typeface, font size and font color.

i have a code that can currently change these features in one ID tag, however i need to be able to edit the text in multiple div tags.

my javascript looks like this:

<script language=javascript>
function changeStyle(element,property,value) {
document.getElementById(element).style[property] = value;

and an example of my body looks like this:

<SELECT style="WIDTH: 100px" onchange="javascript:changeStyle('text', 'color', this.value);" size=1 name=fntcolour> 
<option style="background:#000000;color:white;" value="#000000">black</option>
<option style="background:#d60000;" value="#d60000">red</option>
<option style="background:#ec4c00;" value="#ec4c00">orange</option>
<option style="background:#eedb02;" value="#eedb02">yellow</option>
<option style="background:#00a652;" value="#00a652">green</option>
<option style="background:#00bff3;" value="#00bff3">blue</option>
<option style="background:#93268f;" value="#93268f">violet</option>
<option style="background:#FFFFFF;" value="#FFFFFF" selected>white</option>

any help would e greatly appreciated.



I am not an expert, but if selecting a different look and feel for the site is what you are looking for, check out http://www.csszengarden.com/ where you can select a different set of styles from a column on the right side.

I would probably change the css background property when the option is selected. Are you using any javascript library by chance? In jQuery this would be a super easy solution with only a couple of lines in a single function.