DHTML实例解析:用HTC统一定制表单样式
作者:钟钟 来源:天极设计在线 时间:2007-11-04 18:48:00
在制作表单的时候,我们往往用CSS来重新定义表单元素(如输入框、按钮等)的样式,以便看起来更加美观。而表单中的很多不同元素(如输入框、提交按钮、单选框)使用的是一个标记--Input,这就意味着,我们在CSS中无法通过只定义Input标记来达到我们分别定义样式的目的。一般的做法是定义几种Class,在写表单的时候,不同的元素使用不同的Class。但是在表单较多的时候,这仍显得不是很方便。
那么,有没有更省力的办法呢?答案是肯定的,一个简单的HTC就可以解决这个问题。
实例如下:
htc代码:
<script language=javascript>
switch(type)
{
case 'text':
case 'password': //文本输入框和密码输入框的样式
style.border="1px solid #000000";
style.backgroundColor="#FFFFFF";
style.height="18px";
style.font="normal 12px 宋体";
style.color="#000000";
break;
case 'submit':
case 'reset':
case 'button': //按钮类的样式(不包括图片按钮)
style.border="1px solid #000000";
style.backgroundColor="#CCCCCC";
style.height="18px";
style.font="normal 12px 宋体";
style.color="#000000";
break;
default: ; //对于象单选框多选框等上面没有出现过的元素,我们使用默认样式。
}
</script>
把上面这段代码保存成一个HTC文件,比如保存成input.htc。
简单分析一下代码:事实上这仅仅是一段JS,通过判断type(Input是通过type属性判断是哪种表单域的,注意这里switch语句的使用)来决定使用什么样式。是不是很简单?
HTC文件写好之后,接下来我们要用CSS的行为(behavior)来调用这个HTC文件,调用的CSS语句如下:
input { behavior:url('input.htc') } /*这里假设input.htc与网页在同一目录下*/
我们看到,现在我们是定义了整个Input标记的样式,而具体什么表单元素使用什么样式,则是通过JS在HTC文件中判断并定义的。
怎么样,我们是不是已经通过这样一个简单的实例初步领略到了HTC的魅力呢?
标签:HTC,DHTML,css,样式
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
按钮的反馈
2009-01-01 20:06:00
![](https://img.aspxhome.com/file/UploadPic/20091/1/1-60s.jpg)
PL/SQL编程经验小结开发者网络Oracle
2010-07-18 13:27:00
asp显示数据库中表名、字段名、字段内容
2008-06-17 18:09:00
利用ASP发送和接收XML数据的处理方法
2009-02-02 08:57:00
css行高:line-height属性详解
2008-06-24 11:42:00
![](https://img.aspxhome.com/file/UploadPic/20086/24/2008624115434297s.gif)
SQL数据库操作类
2009-01-14 16:26:00
sqlserver中如何查询出连续日期记录的代码
2011-09-30 11:16:56
![](https://img.aspxhome.com/file/UploadPic/20119/30/2011930115656550s.jpg)
网页设计趋势之:”勾引”用户的按钮
2009-02-17 12:09:00
![](https://img.aspxhome.com/file/UploadPic/20092/17/but-500x47-23s.gif)
CODEPAGE=936是什么意思?
2009-07-05 18:37:00
Facebook是如何设计的[译]
2009-09-17 13:10:00
MySQL手动安装方法与中文解决方案
2011-04-25 18:21:00
javascript基础之indexOf函数
2008-06-25 13:28:00
Oracle性能究极优化
2010-07-30 13:02:00
Linux系统下导出ORACLE数据库出现Exporting questionable statistics.错误 处理
2010-07-16 13:27:00
再论Javascript的类继承
2010-06-26 12:48:00
ImageMagicK convert crop参数说明
2008-10-21 12:46:00
收集的ORACLE函数大全
2010-07-16 12:58:00
ASP和MYSQL开发网站的注意事项
2009-08-21 13:23:00
比较规范的验证Email地址是否正确的正则表达式
2009-07-28 17:55:00
在SQL 2005中实现循环每一行做一定的操作
2009-03-05 14:57:00