用HTC统一定制表单样式

用HTC统一定制表单样式

  在制作表单的时候,我们往往用 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的魅力呢? 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值