求一个字体设置的解决方案，谢谢了
说明：我有三个下拉框，分别是设置字体，字号，颜色的，假设一开始内容就是: "这是我的内容 "这几个字，我选中字体中的黑体，然后变成如下：
<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>
<option value= "red "> 红色 </option>
<option value= "green "> 绿色 </option>
<option value= "blue "> 蓝色 </option>
</select>
<input type= "button " value= "错误调用 " onclick= "setFontStyle( ' ', ' ') ">
<script language= "JavaScript ">
<!--
/**
* @Description:实现文字样式编辑功能
* @Author:chouchy (城市刀客)
* @Date:2007-6-8
*/
function setFontStyle(styleName,styleValue)
{
var editor=document.getElementById( "editor ");
var value=editor.value;
var text=document.selection.createRange().text;
if(text== " ")
{
alert( "请先选择文字 ");
editor.focus();
return;
}
var pos1=editor.value.indexOf(text);
var pos2=pos1+text.length;
var temp=text;
if (temp.indexOf( " <font ")==-1) temp= ' <font> '+text+ ' </font> '; //为选择的文字添加font标签,以便后面正则处理
var p=temp.indexOf( "> ");
var reg= " ";
switch(styleName)
{
case "font-family ":
reg=/\s+style= ".*?; "/i;
if(styleValue!= " ")
{
if(reg.test(temp))//替换样式
temp=temp.replace(reg, ' style= "font-family: '+styleValue+ '; " ');
else//新增样式
temp=temp.substr(0,p)+ ' style= "font-family: '+styleValue+ '; " '+temp.substr(p);
}
else//清除样式
temp=temp.replace(reg, " ");
break;
case "font-size ":
reg=/\s+size= ".*? "/i;
if(styleValue!= " ")
{
if(reg.test(temp))
temp=temp.replace(reg, ' size= " '+styleValue+ ' " ');
else
temp=temp.substr(0,p)+ ' size= " '+styleValue+ ' " '+temp.substr(p);
}
else
temp=temp.replace(reg, " ");
break;
case "font-color ":
reg=/\s+color= ".*? "/i;
if(styleValue!= " ")
{
if(reg.test(temp))
temp=temp.replace(reg, ' color= " '+styleValue+ ' " ');
else
temp=temp.substr(0,p)+ ' color= " '+styleValue+ ' " '+temp.substr(p);
}
else
temp=temp.replace(reg, " ");
break;
default:
alert( "参数错误！ ");
}
reg=/ <font> (.*) <\/font> /i;
if(reg.test(temp)) //如果取消了所有的样式，则去掉font标签，恢复成原来的文字
temp=temp.replace(reg, "$1 ");
editor.value=value.substring(0,pos1)+temp+value.substring(pos2,value.length);
pos2=-1*(value.length-pos2);
//重新确定选择区域
var rng=document.body.createTextRange();
rng.moveToElementText(editor)
rng.moveStart( 'character ',start);
rng.moveEnd( 'character ',end);
rng.select();
}
//-->
</script>
