字体设置的解决方案,多谢了

求一个字体设置的解决方案,谢谢了
说明:我有三个下拉框,分别是设置字体,字号,颜色的,假设一开始内容就是: "这是我的内容 "这几个字,我选中字体中的黑体,然后变成如下:

<font   style= "font-family:黑体; "> 这是我的内容 </font>

然后我继续设置字号,出来结果如下:

<font   style= "font-family:黑体; "   size= "60 "> 这是我的内容 </font>

然后继续添加颜色:

<font   style= "font-family:黑体; "   color= "red "   size= "60 "> 这是我的内容 </font>

当然每种属性都是可以改变的,比如说,我想把黑体改成宋体,把颜色从red改成black,size由60改成20,

不知道这种解决方法可行吗?请各位给个建议,如果可行话,   给出答案??我觉得关键是正则匹配问题,谢谢了~

------解决方案--------------------
你可以定义一个style,然后用控件的class属性来调用,在js里面是可以动态修改style里的属性的,给你一个我以前写的例子,分析一下,我想你可以完成的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<style id= "mm " type= "text/css ">
td{
background-color:red;
border:1px solid #ffffff;
}
</style>

<script type= "text/javascript ">
function to_change(){
var st = document.styleSheets[ 'mm '];
//去掉一个定义用removeRule()
st.removeRule(0);
//添加一个定义用addRule();
st.addRule( "td ", "background-color:blue;border:1px solid #ffffff ");
}

function to_border(){
//修改原有的定义样式用
var st = document.styleSheets[0];
var oRule=st.rules[0];
oRule.style.border= "3px solid #0000FF ";
}
</script>
</head>

<body>
<input type= "button " value= "改变td背景 " onclick= "to_change() " />
<input type= "button " value= "改变border样式 " onclick= "to_border() " />
<table width= "250 " height= "300 ">
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 6 </td>
<td> 5 </td>
<td> 4 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
<textarea name= "editor " rows= "5 " cols= "50 "> 这是我的内容 </textarea> <br>

<select name= "fontFamily " onchange= "setFontStyle( 'font-family ',this.options[selectedIndex].value) ">
<option value= " "> </option>
<option value= "宋体 "> 宋体 </option>
<option value= "黑体 "> 黑体 </option>
</select>
<select name= "fontSize " onchange= "setFontStyle( 'font-size ',this.options[selectedIndex].value) ">
<option value= " "> </option>
<option value= "10 "> 10 </option>
<option value= "20 "> 20 </option>
<option value= "30 "> 30 </option>
</select>
<select name= "fontColor " onchange= "setFontStyle( 'font-color ',this.options[selectedIndex].value) ">
<option value= " "> </option>