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,样式
0
投稿

猜你喜欢

  • Ajax+PHP边学边练 之五 图片处理

    2023-11-18 07:21:29
  • Python函数中的全局变量详解

    2022-08-05 13:58:34
  • Python如何实现在字符串里嵌入双引号或者单引号

    2023-10-18 07:32:39
  • python目录操作之python遍历文件夹后将结果存储为xml

    2023-09-23 13:04:13
  • Python只用40行代码编写的计算器实例

    2023-07-30 07:16:40
  • Django验证码的生成与使用示例

    2021-10-18 02:42:11
  • 使用Python操作PDF文件

    2022-01-01 06:15:12
  • Django使用原生SQL查询数据库详解

    2024-01-21 00:58:08
  • Django Python 获取请求头信息Content-Range的方法

    2022-09-09 07:04:53
  • Yii框架学习笔记之应用组件操作示例

    2024-05-11 09:23:07
  • mysql SELECT语句去除某个字段的重复信息

    2024-01-17 04:15:41
  • CentOS安装SQL Server vNext CTP1教程

    2024-01-27 22:16:26
  • 基于python爬取链家二手房信息代码示例

    2022-09-01 18:36:25
  • python使用matplotlib绘制折线图教程

    2022-06-28 11:26:37
  • mysql递归函数with recursive的用法举例

    2024-01-16 22:37:22
  • ASP提速技巧五则

    2008-03-20 13:20:00
  • Windows下python3安装tkinter的问题及解决方法

    2023-03-30 11:45:31
  • JavaScript实现解析INI文件内容的方法

    2024-04-25 13:10:23
  • 用python做个代码版的小仙女蹦迪视频

    2022-10-14 12:48:59
  • Python判断三段线能否构成三角形的代码

    2023-01-21 19:44:25
  • asp之家 网络编程 m.aspxhome.com