关于动态改变字体及颜色

vc_boy 2004-04-07 11:41:22
用户在输入框中选中一段文字后，如何可以让用户通过点击相关的功能，如粗体、字体颜色等来动态的改变这段文字的字体或颜色？
...全文
319 15 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
xxrl 2004-04-07
  • 打赏
  • 举报
 回复
偶靠，都 很强啊
Sunnyyuan 2004-04-07
  • 打赏
  • 举报
 回复
那只好用控件啦！
vc_boy 2004-04-07
  • 打赏
  • 举报
 回复
谢谢各位，不过有个问题，我是想让用户改变他所选的文字的字体或颜色，然后还能保存到数据库中，就是类似一个RICH TXT的编缉器，不知有何好方法或例子
Newrocky 2004-04-07
  • 打赏
  • 举报
 回复
我是建立了一个空的DIV

然后，改变DIV的STYLE

代码如下：
<html>
<head>

</head>
<body>
<form name="form1">
<select name="align">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
<select name="color">
<option value="#ff0000" selected>red</option>
<option value="#000000">black</option>
<option value="#0000ff">blue</option>
</select>
<textarea name="text">这是用来预览的文字</textarea>

<input type="button" onClick="View()">
</form>

<div id="ViewText" >123</div>

<span></span>
<script language="javascript">
<!-- 预览的触发时机 WHEN BUTTON ONCLICK
function View()
{
alert("luojun");
document.all.ViewText.innerText=form1.text.value
document.all.ViewText.align=document.form1.align.value
document.all.ViewText.style.color=document.form1.color.value
document.all.ViewText.style.fontSize="15pt"

}
-->
</script>
</body>
</html>
swich 2004-04-07
  • 打赏
  • 举报
 回复
楼上的方法不错,也可以用层模仿
lwc92008 2004-04-07
  • 打赏
  • 举报
 回复
可以通过改变输入框的style来实现，呵。
以下是一个事例
请输入文字：<input name="a" value="test">
<button onclick="a.style.color='#336699'">改变颜色</button>
<button onclick="a.style.fontWeight='bold'">粗体</button>
yslcuk 2004-04-07
  • 打赏
  • 举报
 回复
<script language="JavaScript">
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp;
else document.all["napis"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
napis.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
//-->
</script>
<div id="napis"
style="position: absolute;top: -50;
color: #000000;font-family:宋体;font-size:9pt;">
</div><script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>
<script language="JavaScript">
<!-- Begin
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
);
delay = 100
link = 0;
vlink = 0;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay);
}
linkDance();
// End -->
</script>
<script>
function colors(c1){
this.c1 = c1;
}
a00 = new colors("FFFBD0");
a01 = new colors("FF0000");
a02 = new colors("FF8080");
a03 = new colors("FF8000");
a04 = new colors("FFFF00");
a05 = new colors("000080");
a06 = new colors("0000FF");
a07 = new colors("008000");
a08 = new colors("00FF00");
a09 = new colors("804000");
a10 = new colors("808000");
a11 = new colors("000000");
a12 = new colors("FFFFFF");
a13 = new colors("C0C0C0");
a14 = new colors("408080");
a15 = new colors("808080");
a16 = new colors("D2BF51");
a17 = new colors("44BBE8");
a18 = new colors("C97AB9");
a19 = new colors("A2C97A");
a20 = new colors("804000");
a21 = new colors("6AE6C4");
a22 = new colors("33A3D1");
a23 = new colors("6C9AEE");
function changebg(type){
scheme = type;
document.bgColor = scheme.c1;
timerID=setTimeout('document.bgColor = scheme.c2', document.selector.value * 10);
}
</script>
<form NAME="selector">
<p><input TYPE="button" onClick="changebg(a00)" style="background-color: rgb(255,251,208)"><input
TYPE="button" onClick="changebg(a01)" style="background-color: rgb(255,0,0)"><input
TYPE="button" onClick="changebg(a02)" style="background-color: rgb(255,128,128)"><input
TYPE="button" onClick="changebg(a03)" style="background-color: rgb(255,128,0)"><input
TYPE="button" onClick="changebg(a04)" style="background-color: rgb(255,255,0)"><input
TYPE="button" onClick="changebg(a05)" style="background-color: rgb(0,0,128)"><input
TYPE="button" onClick="changebg(a06)" style="background-color: rgb(0,0,255)"><input
TYPE="button" onClick="changebg(a07)" style="background-color: rgb(0,128,0)"><input
TYPE="button" onClick="changebg(a08)" style="background-color: rgb(0,255,0)"><input
TYPE="button" onClick="changebg(a09)" style="background-color: rgb(128,0,0)"><input
TYPE="button" onClick="changebg(a10)" style="background-color: rgb(128,128,0)"><input
TYPE="button" onClick="changebg(a11)" style="background-color: rgb(0,0,0)"><input
TYPE="button" onClick="changebg(a12)" style="background-color: rgb(255,255,255)"><input
TYPE="button" onClick="changebg(a13)" style="background-color: rgb(192,192,192)"><input
TYPE="button" onClick="changebg(a14)" style="background-color: rgb(64,128,128)"><input
TYPE="button" onClick="changebg(a15)" style="background-color: rgb(128,128,128)"><input
TYPE="button" onClick="changebg(a16)" style="background-color: rgb(210,191,81)"><input
TYPE="button" onClick="changebg(a17)" style="background-color: rgb(68,187,232)"><input
TYPE="button" onClick="changebg(a18)" style="background-color: rgb(201,122,185)"><input
TYPE="button" onClick="changebg(a19)" style="background-color: rgb(162,201,122)"><input
TYPE="button" onClick="changebg(a20)" style="background-color: rgb(106,230,196)"><input
TYPE="button" onClick="changebg(a21)" style="background-color: rgb(194,219,185)"><input
TYPE="button" onClick="changebg(a22)" style="background-color: rgb(51,163,209)"><input
TYPE="button" onClick="changebg(a23)" style="background-color: rgb(108,154,238)"> </p>
</form>
vc_boy 2004-04-07
  • 打赏
  • 举报
 回复
用什么能实现这种功能的呢？
sfply 2004-04-07
  • 打赏
  • 举报
 回复
输入框似乎没有这种功能
qzriso 2004-04-07
  • 打赏
  • 举报
 回复
再一次：

<td><div class="cbtn" onClick="cmdExec('justifyleft')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Left.gif" alt="Justify Left">
</div></td>

<td><div class="cbtn" onClick="cmdExec('justifycenter')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Center.gif" alt="Center">
</div></td>

<td><div class="cbtn" onClick="cmdExec('justifyright')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Right.gif" alt="Justify Right">
</div></td>

<td><div class="cbtn" onClick="cmdExec('insertorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/numlist.GIF" alt="Ordered List">
</div></td>

<td><div class="cbtn" onClick="cmdExec('insertunorderedlist')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/bullist.GIF" alt="Unordered List">
</div></td>

<td><div class="cbtn" onClick="cmdExec('outdent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/deindent.gif" alt="Decrease Indent">
</div></td>

<td><div class="cbtn" onClick="cmdExec('indent')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/inindent.gif" alt="Increase Indent">
</div></td>

<td><div class="cbtn" onClick="cmdExec('createLink')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/Link.gif" alt="Link">
</div></td>

<td><div class="cbtn" onClick="insertImage()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/Image.gif" alt="Image">
</div></td>

<td><div class="cbtn" onClick="doInsertTable()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=absmiddle src="images/editor_f24.gif" alt="Image">
</div></td>

<td><div class="cbtn" onClick="Save()" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="2" vspace=1 align=left align=absmiddle src="images/Save.gif" alt="Save">
<font class=txtbtn>Save </font>
</div></td>

<td width=200></td>

</tr>
</table>


<iframe SRC="gledit.htm" id='idContent' width="542" height="200"></iframe>
<input type="hidden" name="content">
</td>
</tr>
<br>
                             



<input type=hidden name=picCount value=0> 
<tr>
<td colspan="6">
<div align="center">
<input type="submit" name=" 提交 " value=" 提交 " onclick="return checkdata()" class="input">    
<input type="reset" name="重新填写" value="重新填写" onclick="window.location='fuzhumanageadd.asp'" class="input">
    
<input type="button" name="返回" value="返回" onclick="window.location='fuzhumanage.asp'" class="input">
</div>
</td>
</tr>
</FORM>

</table>
qzriso 2004-04-07
  • 打赏
  • 举报
 回复
接上面：

</td>
<td height="25" width="32" >年级</td>
<td height="25" >
<select name="grade">
<option value="" selected>请选择</option>
<option value="小一">小一</option>
<option value="小二">小二</option>
<option value="小三">小三</option>
<option value="小四">小四</option>
<option value="小五">小五</option>
<option value="小六">小六</option>
</select>
</td>
<td height="25" width="32">
单元
</td>
<td height="25" >
<input type="text" name="unit" class="input">
</td>
</tr>

<tr>
<td height="25" width="140" align="center">生词</td>
<td height="25" colspan="5">
<input type="text" name="newword" class="input" size="50">
</td>
</tr>
<tr>
<td height="25" width="140" align="center">标题</td>
<td height="25" colspan="5">

<input type="text" name="theme" class="input" size="50" value="">
</td>
</tr>
<tr>
<td height="25" width="140" align="center">内容</td>
<td height="25" colspan="5">
<table id="tblCoolbar" width=542 cellpadding="0" cellspacing="0">
<tr valign="middle">

<td colspan=13>
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
<option value="Normal">Normal</option>
<option value="Heading 1">Heading 1</option>
<option value="Heading 2">Heading 2</option>
<option value="Heading 3">Heading 3</option>
<option value="Heading 4">Heading 4</option>
<option value="Heading 5">Heading 5</option>
<option value="Address">Address</option>
<option value="Formatted">Formatted</option>
<option value="Definition Term">Definition Term</option>
</select>
<select onchange="cmdExec('fontname',this[this.selectedIndex].value);">
<option selected>Font</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="System">System</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select onChange="cmdExec('fontsize',this[this.selectedIndex].value);" name="select3">
<option selected>Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
</td>
<td width="26">
<div class="cbtn" onClick="doForeColor()"; title="文字颜色"; onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/editor_f14.gif" alt="文字颜色">
</div></td>
<td width="26"><div class="cbtn" onClick="doBackColor()"; title="背景颜色"; onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/editor_f15.gif" alt="背景颜色">
</div></td>
<td width="26"> </td>
</tr>
<tr>

<td><div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Cut.gif" alt="Cut">
</div></td>

<td><div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Copy.gif" alt="Copy">
</div></td>

<td><div class="cbtn" onClick="cmdExec('paste')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Paste.gif" alt="Paste">
</div></td>

<td><div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Bold.gif" alt="Bold">
</div></td>

<td><div class="cbtn" onClick="cmdExec('italic')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Italic.gif" alt="Italic">
</div></td>

<td><div class="cbtn" onClick="cmdExec('underline')" onmouseover="button_over(this);" onmouseout="button_out(this);" onmousedown="button_down(this);" onmouseup="button_up(this);">
<img hspace="1" vspace=1 align=absmiddle src="images/Under.gif" alt="Underline">
</div></td>
qzriso 2004-04-07
  • 打赏
  • 举报
 回复

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="ezhishiManage.css" type="text/css">
</head>
<STYLE TYPE="text/css">
TABLE#tblCoolbar
{
background-color:threedface; padding:1px; color:menutext;
border-width:1px; border-style:solid;
border-color:threedhighlight threedshadow threedshadow threedhighlight;
}
.cbtn
{
height:18;
BORDER-LEFT: threedface 1px solid;
BORDER-RIGHT: threedface 1px solid;
BORDER-TOP: threedface 1px solid;
BORDER-BOTTOM: threedface 1px solid;
}
.txtbtn {font-family:tahoma; font-size:70%; color:menutext;}
</STYLE>

<script LANGUAGE="JavaScript">
function button_over(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_out(eButton)
{
eButton.style.backgroundColor = "threedface";
eButton.style.borderColor = "threedface";
}
function button_down(eButton)
{
eButton.style.backgroundColor = "#8494B5";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_up(eButton)
{
eButton.style.backgroundColor = "#B5BDD6";
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
eButton = null;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

var isHTMLMode=false

function document.onreadystatechange()
{
idContent.document.designMode="On"
}
function cmdExec(cmd,opt)
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
idContent.document.execCommand(cmd,"",opt);idContent.focus();
}
function setMode(bMode)
{
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idContent.document.body.innerHTML;idContent.document.body.innerText=sTmp;}
else {sTmp=idContent.document.body.innerText;idContent.document.body.innerHTML=sTmp;}
idContent.focus();
}
function createLink()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
cmdExec("CreateLink");
}

function insertImage()
{
idContent.focus();
document.frames.idContent.document.execCommand('InsertImage','xxx');
}

function doInsertTable(){
var dotable=showModalDialog("editor_table.htm",false,"dialogWidth:200px;dialogHeight:156px;status:0;");
if (dotable!=undefined){
document.frames.idContent.document.body.innerHTML=document.frames.idContent.document.body.innerHTML+dotable;
}else{
return false;
}
idContent.focus()
}

function Save()
{
if (isHTMLMode){alert("Please uncheck 'Edit HTML'");return;}
var sImgTag = idContent.document.body.all.tags("IMG");
var oImg;
for (var i = sImgTag.length - 1; i >= 0; i--)
{
oImg = sImgTag[i];
alert("Add your code to Upload local image file here. Image Inserted : " + oImg.src );
}
alert("Add your code to Save Document here");
alert("Your Document : " + idContent.document.body.innerHTML);
}

function subchk()
{
document.form1.content.value=idContent.document.body.innerHTML;
}


function doForeColor(){
var fcolor=showModalDialog("editor_color.htm",false,"dialogWidth:106px;dialogHeight:126px;status:0;");
document.frames.idContent.document.execCommand('ForeColor',false,fcolor);
idContent.focus();
}


function doBackColor(){
var bcolor=showModalDialog("editor_color.htm",false,"dialogWidth:106px;dialogHeight:126px;status:0;");
document.frames.idContent.document.execCommand('BackColor',false,bcolor);
idContent.focus();
}


function checkdata() {
if (document.form1.title.value=="") {
window.alert ("请输入标题 ！")
form1.title.focus()
return false
}
if (document.form1.type.value=="") {
window.alert ("请选择所属大类！")
return false
}
if (document.form1.subtype.value=="") {
window.alert ("请选择所属子类 ！")
return false
}

return true
}

function showInputFile(){
window.location="/ezhishimanagesystem/fuzhumanageadd.asp?num="+form1.numPic.options[form1.numPic.selectedIndex].value
}

</script>

<pre><b><font color="#F20000" size="3"> 辅助教材信息录入</font></b></pre>
<FORM METHOD=POST ACTION="fuzhumanageaddsubmit.asp?type=" name="form1" onsubmit="subchk()" enctype="multipart/form-data">
<table width="620" border="1" cellspacing="0" cellpadding="5" bordercolorlight=#e5e5e5 bordercolordark=#ffffff>
<tr>
<td colspan="6">
注：题目若有图片请您先选择上传的图片数 
<select name="numPic">

<option value=1>1</option>

<option value=2>2</option>

<option value=3>3</option>

<option value=4>4</option>

<option value=5>5</option>

<option value=6>6</option>

<option value=7>7</option>

<option value=8>8</option>

<option value=9>9</option>

<option value=10>10</option>

<option value=11>11</option>

<option value=12>12</option>

</select> <input type=button value="显示" name="show" onclick="showInputFile()" class="input">
</td>
</tr>
<tr>
<td height="25" align="center">文章类型</td>
<td height="25" >
<select name="typeid" onchange="showcategory()">
<option value="" selected>请选择</option>
<option value="1">学汉语拼音</option>
<option value="2">看图学拼音</option>
<option value="3">跟着课文走</option>
<option value="4">成语学习</option>
</select>
jasonboy 2004-04-07
  • 打赏
  • 举报
 回复
up
vc_boy 2004-04-07
  • 打赏
  • 举报
 回复
tome_yu@sina.com
qingyun1020 2004-04-07
  • 打赏
  • 举报
 回复
楼主，是要这样的例子啊
新闻发布的吗
哈哈，贴你的e-mail我发给你一个
Delphi动态改变VCL对象的颜色和字体.rar
Delphi动态改变VCL对象的颜色和字体，实现的功能有：储存对象、改变颜色、改变字体。在应用程序运行时动态改变VCL对象，而且改变的VCL对象可使用VCL Framework的Persistent功能保存等。通过改变字体颜色和字体样式来...
动态改变字体颜色
使用styleFunction属性指定一个回调函数来定义表格行样式，根据数据动态显示出不同的颜色
对话框字体颜色的动态修改
对对话框中控件字体的颜色实现动态的修改，自动为字体设置任意一种颜色
PB 改变某行某列的字体、背景颜色等
通用函数 指定某行某列的属性值(字体、背景颜色等)
ASP

28,409

社区成员

356,971

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章