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

简介:

下面通过创建一个鼠标滑过加亮显示的 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> 

 

分类:  css

本文转自快乐就好博客园博客,原文链接:http://www.cnblogs.com/happyday56/archive/2007/11/09/953994.html,如需转载请自行联系原作者
相关文章
|
29天前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
25 2
|
3天前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
5 1
|
13天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
21天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
25 1
|
3天前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
29天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
31 1
|
1月前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
1月前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400(2)
|
17天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
1月前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
26 1