怎么用Javascript在web编辑器中实现对象背景设置
日期：2014-05-16 浏览次数：21539 次
如何用Javascript在web编辑器中实现对象背景设置？
我在web编辑器中加入一个下拉列表如下：
<select name= "selectbgColour1 " onChange= "FormatBgcolor( 'bgColor ',selectbgColour1.options[selectbgColour1.selectedIndex].value); document.form1.selectbgColour1.options[0].selected = true; " onMouseOver= "window.status= '选择对象背景颜色。 ';return true; " onMouseOut= "window.status= ' ';return true; ">
<option value= "0 " selected> 选择对象背景颜色 </option>
<option style= "background-color:#F0F8FF;color: #F0F8FF " value= "#F0F8FF "> #F0F8FF </option>
<option style= "background-color:#FAEBD7;color: #FAEBD7 " value= "#FAEBD7 "> #FAEBD7 </option>
<option style= "background-color:#00FFFF;color: #00FFFF " value= "#00FFFF "> #00FFFF </option>
<option style= "background-color:#7FFFD4;color: #7FFFD4 " value= "#7FFFD4 "> #7FFFD4 </option>
<option style= "background-color:#F0FFFF;color: #F0FFFF " value= "#F0FFFF "> #F0FFFF </option>
<option style= "background-color:#F5F5DC;color: #F5F5DC " value= "#F5F5DC "> #F5F5DC </option>
...
</select>
我写的FormatBgcolor函数：
//设置对象背景颜色
function FormatBgcolor(command, option){
frames.message.document.bgColor.execCommand(command, true, option);
frames.message.focus();
}
我想实现的是选择下拉列表，则web编辑器中编辑的页面背景被设置为相应颜色，请教高手如何修改或重写上面的程序？
------解决方案--------------------
如果意思是改变背景色...最简单的..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
</head>
<body>
<select name= "selectbgColour1 " onChange= "FormatBgcolor(selectbgColour1.options[selectbgColour1.selectedIndex].value); ">
<option value= "0 " selected> 选择对象背景颜色 </option>
<option style= "background-color:#F0F8FF;color: #F0F8FF " value= "#F0F8FF "> #F0F8FF </option>
<option style= "background-color:#FAEBD7;color: #FAEBD7 " value= "#FAEBD7 "> #FAEBD7 </option>
<option style= "background-color:#00FFFF;color: #00FFFF " value= "#00FFFF "> #00FFFF </option>
<option style= "background-color:#7FFFD4;color: #7FFFD4 " value= "#7FFFD4 "> #7FFFD4 </option>
<option style= "background-color:#F0FFFF;color: #F0FFFF " value= "#F0FFFF "> #F0FFFF </option>
<option style= "background-color:#F5F5DC;color: #F5F5DC " value= "#F5F5DC "> #F5F5DC </option>
...
</select>
</body>
</html>
<script type= "text/javascript ">
function FormatBgcolor(option){
document.body.style.background = option;
}
</script>
我在web编辑器中加入一个下拉列表如下：
<select name= "selectbgColour1 " onChange= "FormatBgcolor( 'bgColor ',selectbgColour1.options[selectbgColour1.selectedIndex].value); document.form1.selectbgColour1.options[0].selected = true; " onMouseOver= "window.status= '选择对象背景颜色。 ';return true; " onMouseOut= "window.status= ' ';return true; ">
<option value= "0 " selected> 选择对象背景颜色 </option>
<option style= "background-color:#F0F8FF;color: #F0F8FF " value= "#F0F8FF "> #F0F8FF </option>
<option style= "background-color:#FAEBD7;color: #FAEBD7 " value= "#FAEBD7 "> #FAEBD7 </option>
<option style= "background-color:#00FFFF;color: #00FFFF " value= "#00FFFF "> #00FFFF </option>
<option style= "background-color:#7FFFD4;color: #7FFFD4 " value= "#7FFFD4 "> #7FFFD4 </option>
<option style= "background-color:#F0FFFF;color: #F0FFFF " value= "#F0FFFF "> #F0FFFF </option>
<option style= "background-color:#F5F5DC;color: #F5F5DC " value= "#F5F5DC "> #F5F5DC </option>
...
</select>
我写的FormatBgcolor函数：
//设置对象背景颜色
function FormatBgcolor(command, option){
frames.message.document.bgColor.execCommand(command, true, option);
frames.message.focus();
}
我想实现的是选择下拉列表，则web编辑器中编辑的页面背景被设置为相应颜色，请教高手如何修改或重写上面的程序？
------解决方案--------------------
如果意思是改变背景色...最简单的..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
</head>
<body>
<select name= "selectbgColour1 " onChange= "FormatBgcolor(selectbgColour1.options[selectbgColour1.selectedIndex].value); ">
<option value= "0 " selected> 选择对象背景颜色 </option>
<option style= "background-color:#F0F8FF;color: #F0F8FF " value= "#F0F8FF "> #F0F8FF </option>
<option style= "background-color:#FAEBD7;color: #FAEBD7 " value= "#FAEBD7 "> #FAEBD7 </option>
<option style= "background-color:#00FFFF;color: #00FFFF " value= "#00FFFF "> #00FFFF </option>
<option style= "background-color:#7FFFD4;color: #7FFFD4 " value= "#7FFFD4 "> #7FFFD4 </option>
<option style= "background-color:#F0FFFF;color: #F0FFFF " value= "#F0FFFF "> #F0FFFF </option>
<option style= "background-color:#F5F5DC;color: #F5F5DC " value= "#F5F5DC "> #F5F5DC </option>
...
</select>
</body>
</html>
<script type= "text/javascript ">
function FormatBgcolor(option){
document.body.style.background = option;
}
</script>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
