You need to modify the content's container's style object:
Code:
<html>
<head>
<title>Change Appearance</title>
<script type="text/javascript">
function changeFontFamily(FontFamily)
{
var oElement = document.getElementById("divBody");
changeStyleAttribute(oElement, "fontFamily", FontFamily);
}
function changeFontSize(FontSize)
{
var oElement = document.getElementById("divBody");
changeStyleAttribute(oElement, "fontSize", FontSize);
}
function changeStyleAttribute(Element, Attribute, Value)
{
Element.style[Attribute] = Value;
}
</script>
</head>
<body>
<select onchange="changeFontFamily(this.options[this.selectedIndex].value);">
<option value="Times New Roman" selected>Times New Roman</option>
<option value="Tahoma">Tahoma</option>
<option value="Book Antiqua">Book Antiqua</option>
<option value="Arial">Arial</option>
<option value="Webdings">Webdings</option>
</select>
<select onchange="changeFontSize(this.options[this.selectedIndex].value);">
<option value="6pt">6 point</option>
<option value="10pt">10 point</option>
<option value="14pt" selected>14 point</option>
<option value="18pt">18 point</option>
<option value="22pt">22 point</option>
</select>
<div id="divBody" style="font-family: Times New Roman; font-size:14pt;">
This is some text that can be changed by choosing different options from the two select boxes above.
</div>
</body>
</html>
--
Joe