什么是CSSexpression? IE5及其以后版本支持在CSS中使用expression
![](/icons/92680dou.gif)
用来把CSS属性和Javascript脚本关联起来
![](/icons/92680dou.gif)
这里
![](/icons/92680de.gif)
CSS属性可以是元素固有
![](/icons/92680de.gif)
属性
![](/icons/92680dou.gif)
也可以是自定义属性
![](/icons/92680dou2.gif)
就是说CSS属性后面可以是
![](/icons/92680yi.gif)
段Javascript表达式
![](/icons/92680dou.gif)
CSS属性
![](/icons/92680de.gif)
值等于Javascript表达式计算
![](/icons/92680de.gif)
结果
![](/icons/92680dou2.gif)
在表达式中可以直接引用元素自身
![](/icons/92680de.gif)
属性和思路方法
![](/icons/92680dou.gif)
也可以使用其他浏览器对象
![](/icons/92680dou2.gif)
这个表达式就好像是在这个元素
![](/icons/92680de.gif)
![](/icons/92680yi.gif)
个成员
![](/icons/92680hanshu.gif)
中
![](/icons/92680yi.gif)
样
![](/icons/92680dou2.gif)
是不是感觉上面
![](/icons/92680de.gif)
文字有点晦涩?没有关系
![](/icons/92680dou.gif)
你只需要知道:我们可以通过expression把Javascript脚本写放在css文件中
![](/icons/92680dou.gif)
通过它来实现
![](/icons/92680yi.gif)
些很方便
![](/icons/92680de.gif)
功能和效果
CSSexpression能发挥什么作用呢? 1、给元素固有属性赋值 下面
![](/icons/92680de.gif)
例子是依照浏览器
![](/icons/92680de.gif)
大小来安置
![](/icons/92680yi.gif)
个元素
![](/icons/92680de.gif)
位置
![](/icons/92680dou2.gif)
查看运行效果试试
![](\"http://www./Files/BeyondPic/2007-5/24/0752416053049499.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run
[www.52css.com] =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
2、给元素自定义属性赋值 我们想给页面
![](/icons/92680de.gif)
链接消除点击时产生
![](/icons/92680de.gif)
虚线
![](/icons/92680dou2.gif)
在
![](/icons/92680yi.gif)
般情况下
![](/icons/92680dou.gif)
我们是这样做
![](/icons/92680de.gif)
:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416053039127.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]<ahref=\"link1.htm\"onfocus=\"this.blur
![](/icons/92680kh.gif)
\">52css.com</a><br/>
<ahref=\"link2.htm\"onfocus=\"this.blur
![](/icons/92680kh.gif)
\">52css.com</a><br/>
<ahref=\"link3.htm\"onfocus=\"this.blur
![](/icons/92680kh.gif)
\">52css.com</a>
粗看或许没有感觉
![](/icons/92680dou2.gif)
但如果你
![](/icons/92680de.gif)
页面上有几十甚至上百个链接
![](/icons/92680dou.gif)
这时
![](/icons/92680de.gif)
你难道还会机械式地Ctrl+C
![](/icons/92680dou.gif)
Ctrl+V么
![](/icons/92680dou.gif)
采用expression
![](/icons/92680de.gif)
优势现在就突现出来了
![](/icons/92680dou2.gif)
两者比较
![](/icons/92680dou.gif)
哪个产生
![](/icons/92680de.gif)
冗余代码更多呢?
![](\"http://www./Files/BeyondPic/2007-5/24/0752416053039127.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com] 采用expression
![](/icons/92680de.gif)
做法如下:
a{star:expression(this.onFocus=this.blur
![](/icons/92680kh.gif)
)}
我们看下面
![](/icons/92680de.gif)
例子:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416053049499.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run
[www.52css.com] =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
介绍说明:里面
![](/icons/92680de.gif)
star就是自己任意定义
![](/icons/92680de.gif)
属性
![](/icons/92680dou.gif)
你可以随自己喜好另外定义
![](/icons/92680dou.gif)
接着包含在expression
![](/icons/92680kh.gif)
里
![](/icons/92680de.gif)
语句就是JS脚本
![](/icons/92680dou.gif)
在自定义属性和expression的间可别忘了还有
![](/icons/92680yi.gif)
个引号
![](/icons/92680dou.gif)
![](/icons/92680yinwei.gif)
实质还是CSS
![](/icons/92680dou.gif)
所以放在style标签内
![](/icons/92680dou.gif)
而非script内
![](/icons/92680dou2.gif)
这样就很容易地用
![](/icons/92680yi.gif)
句话实现了页面中
![](/icons/92680de.gif)
链接虚线框
![](/icons/92680de.gif)
消除
需要引起你特别重视
:若不是非常特别
![](/icons/92680de.gif)
需要用到expression
![](/icons/92680dou.gif)
![](/icons/92680yi.gif)
般不建议使用expression
![](/icons/92680dou.gif)
![](/icons/92680yinwei.gif)
expression对浏览器资源要求比较高
![](/icons/92680dou2.gif)
我们将在以后
![](/icons/92680de.gif)
文章中
![](/icons/92680dou.gif)
写出
![](/icons/92680yi.gif)
些有关expression应用
![](/icons/92680de.gif)
例子及使用方法
![](/icons/92680de.gif)
注意点
![](/icons/92680dou.gif)
请关注我们
![](/icons/92680de.gif)
网站WebSite:我爱CSS-52css.com
延伸阅读
最新评论