HTC文件的使用

效果: 鼠标滑过文字的时候 会变颜色

注意的问题:
htc 只能在IE浏览器上使用(IE 5.5以上)
    在火狐浏览器不被支持

基础知识:
 
在微软(R)Internet Explorer 5中介绍，HTML组件(HTCs)提供一种机制来使用脚本作为动态HTML(DHTML)行为实现组件功能。以.htc扩展名保存，一份HTC是一份包含脚本和一组用

于定义组件的HTC特殊元素的HTML文件。此部分包含相关元素和它们支持的成员。

对象
     document                                在给定的浏览器窗口中表现HTML文档。
     element                          返回一份主文档中连接行为的标签的参考。
     PUBLIC:ATTACH                    绑定一个函数到一个事件上，因此每次事件发生在特殊对象上时函数会被调用。
     PUBLIC:COMPONENT   以HTC指明文件的内容。
     PUBLIC:DEFAULTS       设定一份HTC的默认属性。
     PUBLIC:EVENT             定义一个HTC的事件，使之暴露于包含该HTC的文档。
     PUBLIC:METHOD        定义一个HTC的方法，使之暴露于包含该HTC的文档。
     PUBLIC:PROPERTY              定义一个HTC的属性，使之暴露于包含该HTC的文档。

方法
     createEventObject
     创建一个事件对象，当需要传递事件附加信息给PUBLIC:EVENT元素的fire方法时使用。

事件
     oncontentready
     连接了行为的元素的内容完全被解析时发生。
     oncontentsave
     连接了一份元素行为的一个元素的内容被保存或复制前发生。
     ondetach
     从一个元素解除一份行为的连接前发生。
     ondocumentready
     当包含行为的文档完全被解析时发生。

下面说一下 我的步骤:

1. 创建一个htc文件(hilite.htc)

 

HTC代码

   
     

    
      <
    
      PUBLIC:COMPONENT
    
      >
    
       

    
      <
    
      PUBLIC:ATTACH EVENT
    
      =
    
      "
    
      onmouseover
    
      "
    
       ONEVENT
    
      =
    
      "
    
      Hilite()
    
      "
    
       
    
      /
    
      > 
    
      

    
      <
    
      PUBLIC:ATTACH EVENT
    
      =
    
      "
    
      onmouseout
    
      "
    
       ONEVENT
    
      =
    
      "
    
      Restore()
    
      "
    
       
    
      /
    
      > 
    
      

    
      <
    
      SCRIPT LANGUAGE
    
      =
    
      "
    
      JScript
    
      "
    
      >
    
       

    
      var
    
       normalColor, normalSpacing; 

    
      function
    
       Hilite() 
{ 

    
      //
    
       save original values 
    
      

    
      normalColor 
    
      =
    
       runtimeStyle.color; 
normalSpacing
    
      =
    
       runtimeStyle.letterSpacing; 
runtimeStyle.color 
    
      =
    
       
    
      "
    
      red
    
      "
    
      ; 
runtimeStyle.letterSpacing 
    
      =
    
       
    
      2
    
      ; 
} 

    
      function
    
       Restore() 
{ 

    
      //
    
       restore original values 
    
      

    
      runtimeStyle.color 
    
      =
    
       normalColor; 
runtimeStyle.letterSpacing 
    
      =
    
       normalSpacing; 
} 

    
      <
    
      /
    
      SCRIPT> 
    
      

    
      <
    
      /
    
      PUBLIC:COMPONENT>
   
     

2. 创建一个测试页面 (WebForm1.aspx)

HTML前台代码

   
     

    
      <%
    
      @ Page Language
    
      =
    
      "
    
      C#
    
      "
    
       AutoEventWireup
    
      =
    
      "
    
      true
    
      "
    
       CodeBehind
    
      =
    
      "
    
      WebForm1.aspx.cs
    
      "
    
       Inherits
    
      =
    
      "
    
      WebApplication3.WebForm1
    
      "
    
       
    
      %>
    
      


    
      <!
    
      DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
      >
    
      

    
      <
    
      html 
    
      xmlns
    
      ="http://www.w3.org/1999/xhtml"
    
      >
    
      

    
      <
    
      head 
    
      runat
    
      ="server"
    
      >
    
      
 
    
      <
    
      title
    
      >
    
      无标题页
    
      </
    
      title
    
      >
    
      
 
    
      <
    
      style 
    
      type
    
      ="text/css"
    
      >
    
      
 LI
 
    
      {
    
      
 behavior
    
      :
    
       url(hilite.htc)
    
      ;
    
      
 
    
      }
    
      
 
    
      </
    
      style
    
      >
    
      

    
      </
    
      head
    
      >
    
      

    
      <
    
      body
    
      >
    
      
 
    
      <
    
      form 
    
      id
    
      ="form1"
    
       runat
    
      ="server"
    
      >
    
      
 
    
      <
    
      ul
    
      >
    
      
 
    
      <
    
      li
    
      >
    
      网页陶吧
    
      </
    
      li
    
      >
    
      
 
    
      <
    
      li
    
      >
    
      homepage.yesky.com
    
      </
    
      li
    
      >
    
      
 
    
      </
    
      ul
    
      >
    
      
 
    
      </
    
      form
    
      >
    
      

    
      </
    
      body
    
      >
    
      

    
      </
    
      html
    
      >
   
     

结束语: 可以看到效果 (当鼠标滑过文字的时候 会变化颜色)