使用css中的伪类和行为实现兼容各种浏览器的鼠标行为 - 放糖的绿豆汤

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

给元素固有属性赋值

下面是定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。

<style type="text/css" media="screen">
#container { width: expression((documentElement.clientWidth < 725) ? "725px" : "auto" ); }
</style>

给元素自定义属性赋值

例如，消除页面上的链接虚线框。通常的做法是：

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>
粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？

采用expression的做法如下：

<style type="text/css">
a {star : expression(onfocus=this.blur);}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>
说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

注意:不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。

伪类的使用方法摘自w3school.com.cn，如下以“focus 伪类”为例

定义

:focus 伪类在元素获得焦点时向元素添加特殊的样式。

注释：IE 浏览器不支持此属性。

说明

这个伪类应用于有焦点的元素。例如 HTML 中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会输入到这个输入框。其他元素（如超链接）也可以有焦点，不过 CSS 没有定义哪些元素可以有焦点。
例子
a:link {color: #FF0000}     /* 未访问的链接 */
a:focus {color: #00FF00}  /* 获得焦点的链接 */
注释：伪类的名称对大小写不敏感。

注释：伪类可与 CSS 类配合使用：
a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>
如果上面这个例子中的链接已被访问过，那么它会显示为红色。

最后看看我们如何创建兼容的css鼠标事件，例如我们想让一个输入框在点击以后变颜色，代码如下：

<html> 
<head> 
<style> 
.red { 
action: expression( 
onfocus=function(){this.style.backgroundColor="#00FFFF";}, 
onblur=function(){this.style.backgroundColor="#FFFFFF";} 
        ); 
} 
.red:focus { 
background-color: #00FFFF; 
} 
</style> 
</hend> 
<body> 
<input type="text" name="text" class="red" > 
</body> 
</html>

如此，当你点击test输入框时颜色就会改变，同时将此class放在所有想实现此效果的对象上即可，不必每个对象都一一添加相应的鼠标事件。

原创文章，转载时请注明地址：http://www.quke.cn

前一篇：英文文本的自动换行的处理方式

后一篇：在Django中自定义Tag和Filter(二)

内容载入中...