使用htc对CSS样式进行封装

最新推荐文章于 2025-08-23 09:10:07 发布

原创最新推荐文章于 2025-08-23 09:10:07 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种利用CSS和HTC文件相结合的方法，实现了对HTML元素更灵活的动态样式控制。通过自定义HTC组件绑定鼠标悬停等事件，并在事件触发时改变元素的颜色和间距，展示了如何封装这些事件及处理方法。

昨天一直在想 css只能对静态的属性进行封装但是有些事件直接写道标签里还是太复杂了只能<img onmouseover="....">这种方式还是比较落后的如果能够很好的把这些事件进行封装了那就更加完整了

遇到冰云提示用htc 找了一下相关资料很好用首先表示感谢

首先建立test.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;
}
</SCRIPT>
</PUBLIC:COMPONENT>

这个文件把事件和函数进行绑定然后再函数里面给出具体的处理方法

================================================================

然后是test.css，作为样式表，他把LI标签（可以使其他的标签或者样式名称）进行绑定
-------------------------------------------------------------------------------------------------------------------
/* CSS Document */
LI {behavior:url(test.htc)}

====================================================================

最后是调用css的htm文件，它引入了样式表文件test.css
------------------------------------------------------------------------------------------------------------------
<HEAD>
<link href="./test.css" rel="stylesheet" type="text/css"></link>
</HEAD>
<P>Mouse over the two list items below to see this effect.
<a href="http://blog.youkuaiyun.com/overmind/">overmind</a>
<UL>
<LI>HTML Authoring</LI>
<LI>Dynamic HTML</LI>
</UL>

可以对img进行样式的封装了，不只是静态的样式，而且是包括事件和方法的样式---------帅