当前位置：首页 -> 网页设计 -> DREAMWEAVER -> DHTML实例解析:用HTC统一定制表单样式

DHTML实例解析:用HTC统一定制表单样式

时间： 2021-07-31 作者：daque

在创造表单的功夫，咱们常常用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的魅力呢？