当下拉框选择了一种颜色,输入框的字显示你所选择的颜色。我用了写了一个JS。不是很难实现。
有图有真像:
上代码:
代码有点长,文章尾有演示和下载。
<!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=utf-8" /> <title>下拉选择框改变输入框中字的颜色</title> </head> <style> .bg1{ background-color:#000000;} .bg2{ background-color:#ffffff;} .bg3{ background-color:#008000;} .bg4{ background-color:#800000;} .bg5{ background-color:#808000;} .bg6{ background-color:#000080;} .bg7{ background-color:#800080;} .bg8{ background-color:#808080;} .bg9{ background-color:#ffff00;} .bg10{ background-color:#00ff00;} .bg11{ background-color:#00ffff;} .bg12{ background-color:#ff00ff;} .bg13{ background-color:#ff0000;} .bg14{ background-color:#0000ff;} .bg15{ background-color:#008080;} .fc1{ color:#000000;} .fc2{ color:#ffffff;} .fc3{ color:#008000;} .fc4{ color:#800000;} .fc5{ color:#808000;} .fc6{ color:#000080;} .fc7{ color:#800080;} .fc8{ color:#808080;} .fc9{ color:#ffff00;} .fc10{ color:#00ff00;} .fc11{ color:#00ffff;} .fc12{ color:#ff00ff;} .fc13{ color:#ff0000;} .fc14{ color:#0000ff;} .fc15{ color:#008080;} </style> <body> <input type="text" value="这里是测试题目" /> <select onchange="changecolor(this.value)"> <option value="">选择颜色</option> <option value="fc1"></option> <option value="fc2"></option> <option value="fc3"></option> <option value="fc4"></option> <option value="fc5"></option> <option value="fc6"></option> <option value="fc7"></option> <option value="fc8"></option> <option value="fc9"></option> <option value="fc10"></option> <option value="fc11"></option> <option value="fc12"></option> <option value="fc13"></option> <option value="fc14"></option> <option value="fc15"></option> </select> <br /> <br /> 这个是例子。当下拉框选择了一种颜色,输入框的字显示你所选择的颜色。 <script type="text/javascript"> function changecolor(color){ var s = document.getElementById('title'); s.className = color; } </script> </html>end
附件下载/演示源码:
【 select_change_font_color.htm 】 2.33KB
分享到: 更多
相关日志:
jquery取表单的值
tab申缩滑动特效 JQ插件kwicks
javascript 中的的RegExp()工具
JS验证时间名目
如何去掉jiathis分享条中的“这是什么东西 jiathis”
ie6下png图片透明只写CSS,不消JS的hack
JS鼠标点击文字变文本框
JS解密函数function(p,a,c,k,e,d)
div+css+js隔行换色+鼠标悬停变色