使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号.颜色_

文章·资料	电脑软件	手机软件	网站源码
电脑·手机·网络学习话题娱乐故事文化·历史国学典籍法律法规	操作系统网络办公·文件音频视频图形图像硬件·驱动程序行业学习编程游戏	安卓苹果鸿蒙其他	ASP ASP.NET JSP PHP HTML·CSS·JavaScript

本站搜索

推荐文章 More...


	华硕易电脑(ASUS Eee PC 10.. 先来段开场白：为了外出携带方便，..

	Acronis True Image 使用.. 　　一款可以在Windows下使用全..

	Norton Ghost 使用详解一、分区备份　　使用Ghost进..

文章阅读排行


	Microsoft SQL Server 2000.. 　　对于第一次安装 Microsoft SQ..

	ASP：Dimac W3 JMail 发送.. 【发送邮件测试代码下载】压..

	ASP：Persits ASPMail 发送.. 【发送邮件测试代码下载】压..

	VMware Workstation：安装.. 编写这份虚拟机安装的图文教程，..

	华硕易电脑(ASUS Eee PC 10.. 先来段开场白：为了外出携带方便，..

	ASP：Microsoft CDO 发送邮.. 【发送邮件测试代码下载】压..

文章信息

使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号.颜色

〖评论()〗〖留言〗〖收藏〗

〖文章分类：电脑·手机·网络 / HTML·CSS·JavaScript〗〖阅读选项〗

<Script Language="JavaScript">

</Script>

<form name="Admin_Sort" method="post" action="Admin_Sort.asp">
<input type="text" name="So_Name" value="测试文字">
<br><br>
<select name="So_NameFont" size="1" onchange="JavaScript:So_NameFont_Select();">
<option value="宋体">字体...</option>
<option value="黑体">黑体</option>
<option value="宋体">宋体</option>
<option value="仿宋_GB2312">仿宋_GB2312</option>
<option value="新宋体">新宋体</option>
<option value="隶体">隶体</option>
<option value="楷体_GB2312">楷体_GB2312</option>
<option value="黑体">黑体</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Courier New">Courier New</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
<select name="So_NameSize" size="1" class="Admin_Select" style="width:72;background-color:#FFFFFF;" onchange="JavaScript:So_NameSize_Select();">
<option value="12px">字号...</option>
<option value="8px">8px</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
</select>
<select name="So_NameColor" size="1" class="Admin_Select" style="width:72;background-color:#FFFFFF;" onchange="JavaScript:So_NameColor_Select();">
<option value="Black">颜色...</option>
<option value="Black" style="color:Black">Black</option>
<option value="Blue" style="color:Blue">Blue</option>
<option value="Green" style="color:Green">Green</option>
<option value="Maroon" style="color:Maroon">Maroon</option>
<option value="Navy" style="color:Navy">Navy</option>
<option value="Olive" style="color:Olive">Olive</option>
<option value="Purple" style="color:Purple">Purple</option>
<option value="Red" style="color:Red">Red</option>
<option value="Silver" style="color:Silver">Silver</option>
</select>

特别提醒：我是在 Windows Internet Explorer 8 下测试的，发现红色代码是区分大小写的。另外，JavaScript 可以放在<head></head>里

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 
<title>使用脚本(JavaScript)对下拉表单(Select)选择而改变表单文本框(Input)的字体.字号.颜色__当百网</title> 
</head>

<body> 
<Script Language="JavaScript"> 
<!-- 
function So_NameFont_Select() { 
    document.forms['Admin_Sort'].So_Name.style.fontFamily=document.Admin_Sort.So_NameFont.value; 
}

function So_NameSize_Select() { 
    document.forms['Admin_Sort'].So_Name.style.fontSize=document.Admin_Sort.So_NameSize.value; 
}

function So_NameColor_Select() { 
    document.forms['Admin_Sort'].So_Name.style.color=document.Admin_Sort.So_NameColor.value; 
} 
//--> 
</Script>

<form name="Admin_Sort" method="post" action="Admin_Sort.asp"> 
<input type="text" name="So_Name" value="测试文字"> 
<br /><br /> 
<select name="So_NameFont" size="1" onchange="JavaScript:So_NameFont_Select();"> 
<option value="宋体">字体...</option> 
<option value="黑体">黑体</option> 
<option value="宋体">宋体</option> 
<option value="仿宋_GB2312">仿宋_GB2312</option> 
<option value="新宋体">新宋体</option> 
<option value="隶体">隶体</option> 
<option value="楷体_GB2312">楷体_GB2312</option> 
<option value="黑体">黑体</option> 
<option value="Arial">Arial</option> 
<option value="Arial Black">Arial Black</option> 
<option value="Courier New">Courier New</option> 
<option value="Tahoma">Tahoma</option> 
<option value="Times New Roman">Times New Roman</option> 
<option value="Verdana">Verdana</option> 
</select> 
<select name="So_NameSize" size="1" class="Admin_Select" style="width:72;background-color:#FFFFFF;" onchange="JavaScript:So_NameSize_Select();"> 
<option value="12px">字号...</option> 
<option value="8px">8px</option> 
<option value="10px">10px</option> 
<option value="12px">12px</option> 
<option value="14px">14px</option> 
<option value="16px">16px</option> 
<option value="18px">18px</option> 
</select> 
<select name="So_NameColor" size="1" class="Admin_Select" style="width:72;background-color:#FFFFFF;" onchange="JavaScript:So_NameColor_Select();"> 
<option value="Black">颜色...</option> 
<option value="Black" style="color:Black">Black</option> 
<option value="Blue" style="color:Blue">Blue</option> 
<option value="Green" style="color:Green">Green</option> 
<option value="Maroon" style="color:Maroon">Maroon</option> 
<option value="Navy" style="color:Navy">Navy</option> 
<option value="Olive" style="color:Olive">Olive</option> 
<option value="Purple" style="color:Purple">Purple</option> 
<option value="Red" style="color:Red">Red</option> 
<option value="Silver" style="color:Silver">Silver</option> 
</select>

</body> 
</html>

文章作者：啊估整理［作者的电子邮箱］更新日期：2009-07-14

〖文章浏览：〗〖打印文章〗〖发送文章〗

·使用脚本(JavaScript)实现同一个页面中的多个层(div)同时只显示指定的一个 2009-08-19
·使用脚本(JavaScript)实现同一表单(form)中同时全选/反选/清除两个不同名称的复选框(.. 2009-08-19
·使用脚本(JavaScript)实现鼠标通过(onMouseOver)/离开(onMouseOut)文本、图片、表格.. 2009-10-05

阅读说明

·本站大部分文章转载于网络，如有侵权请留言告知，本站即做删除处理。
·本站法律法规类文章转载自[中国政府网(www.org.cn)]，相关法律法规如有修订，请浏览[中国政府网]网站。
·本站转载的文章，不为其有效性，实效性，安全性，可用性等做保证。
·如果有什么问题，或者意见建议，请联系［网站管理员］。

当百网

本站使用【啊估文章软件站】网站系统〖网站管理员留言簿〗