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

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

<PUBLIC:COMPONENT> 
<SCRIPT> 
</SCRIPT> 
</PUBLIC:COMPONENT> 

  2、写一个可执行的脚本。
  
  在下面的代码中,ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 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> 

  将上面保存为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>  

转载请注明出处:https://www.onexin.net/how-to-use-the-htc-file-to-package-and-css-styles/

随机文章:

1、深入理解Magento – 第五章 – Magento资源配置
https://www.onexin.net/depth-understanding-of-magento-chapter-v-magento-resources/

2、如何将网站批量提交搜索引擎?
https://www.onexin.net/how-do-i-submit-a-site-bulk-search-engine/

3、用相对定位和负向移动完成图片象框阴影
https://www.onexin.net/with-the-relative-positioning-and-negative-for-the-mobile-to-complete-the-picture-like-a-shadow-box/

4、Discuz!X 2.5升级前与升级后(笔记)
https://www.onexin.net/discuz-x-2-5-upgrade-before-and-after-the-upgrade-notes/

5、从战略出发,分析做事 做市 做势
https://www.onexin.net/from-strategy-analyzes-the-market-potential-to-do-things-to-do/

Leave a Reply