DHTML实例解析:用HTC统一定制表单样式
在制作表单的时候，我们往往用CSS来重新定义表单元素（如输入框、按钮等）的样式，以便看起来更加美观。而表单中的很多不同元素（如输入框、提交按钮、单选框）使用的是一个标记－－Input，这就意味着，我们在CSS中无法通过只定义Input标记来达到我们分别定义样式的目的。一般的做法是定义几种Class，在写表单的时候，不同的元素使用不同的Class。但是在表单较多的时候，这仍显得不是很方便。<P> 那么，有没有更省力的办法呢？答案是肯定的，一个简单的<STRONG>HTC</STRONG>就可以解决这个问题。<BR><BR> 实例如下：</P><P> htc代码： </P><P>＜script language=javascript＞<BR>switch(type)<BR>{<BR> case 'text':<BR> case 'password': //文本输入框和密码输入框的样式<BR> style.border="1px solid #000000";<BR> style.backgroundColor="#FFFFFF";<BR> style.height="18px";<BR> style.font="normal 12px 宋体";<BR> style.color="#000000";<BR> break;<BR><BR> case 'submit':<BR> case 'reset':<BR> case 'button': //按钮类的样式（不包括图片按钮）<BR> style.border="1px solid #000000";<BR> style.backgroundColor="#CCCCCC";<BR> style.height="18px";<BR> style.font="normal 12px 宋体";<BR> style.color="#000000";<BR> break;<BR><BR> default: ; //对于象单选框多选框等上面没有出现过的元素，我们使用默认样式。<BR>}<BR>＜/script＞</P><P> 把上面这段代码保存成一个HTC文件，比如保存成<STRONG>input.htc</STRONG>。</P><P> 简单分析一下代码：事实上这仅仅是一段JS，通过判断type（Input是通过type属性判断是哪种表单域的，注意这里switch语句的使用）来决定使用什么样式。是不是很简单？</P><P> HTC文件写好之后，接下来我们要用CSS的行为（behavior）来调用这个HTC文件，调用的CSS语句如下：</P><P> input { behavior:url('<STRONG>input.htc</STRONG>') } /*这里假设input.htc与网页在同一目录下*/</P><P> 我们看到，现在我们是定义了整个Input标记的样式，而具体什么表单元素使用什么样式，则是通过JS在HTC文件中判断并定义的。</P><P> 怎么样，我们是不是已经通过这样一个简单的实例初步领略到了HTC的魅力呢？<BR></P><p></p></p><p align='center'><font color='red'><b></b></font></p>
页:
[1]