天天看点

如何使用HTC文件来封装CSS样式 runtimeStyle

下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。

<PUBLIC:COMPONENT> 

<SCRIPT> 

</SCRIPT> 

</PUBLIC:COMPONENT>

  2、写一个可执行的脚本。

在下面的代码中,ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 HTC 通过切换颜色来体现鼠标滑过元素时的加亮效果。

<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; 

  将上面保存为hilite.htc文件。

  注意:您可以直接使用属性、方法或者是事件的名称来访问它们,并不需要在前面加上 element 的前缀。在前面的例子中我们注意到在切换颜色时我们直接调用了 runtimeStyle ,而不是使用 element.runtimeStyle。

  3、一旦执行,这个 HTC 就能在网页中应用来达到鼠标滑过加亮的效果。

<HEAD> 

<STYLE> 

LI {behavior:url(hilite.htc)} 

</STYLE> 

</HEAD>

<P>Mouse over the two list items below to see this effect. 

<UL> 

<LI>中国站长站</LI> 

<LI>www.chinaz.com</LI> 

</UL> 

本文转自快乐就好博客园博客,原文链接:http://www.cnblogs.com/happyday56/archive/2007/11/09/953994.html,如需转载请自行联系原作者