字体设置的解决方案，多谢了
日期：2014-05-16 浏览次数：20564 次
求一个字体设置的解决方案，谢谢了
说明：我有三个下拉框，分别是设置字体，字号，颜色的，假设一开始内容就是: "这是我的内容 "这几个字，我选中字体中的黑体，然后变成如下：
<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) ">
说明：我有三个下拉框，分别是设置字体，字号，颜色的，假设一开始内容就是: "这是我的内容 "这几个字，我选中字体中的黑体，然后变成如下：
<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) ">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
