CSS中expression怎么用? CSS expression详解

什么是CSS expression?
  IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。
在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
是不是感觉上面的文字有点晦涩?没有关系,你只需要知道:我们可以通过expression把Javascript脚本写放在css文件中,通过它来实现一些很方便的功能与效果。
  CSS expression能发挥什么作用呢?
  1、给元素固有属性赋值
  2、给元素自定义属性赋值
  我们想给页面的链接消除点击时产生的虚线。
  在一般情况下,我们是这样做的:

 代码如下 复制代码
<a href="link1.htm" onfocus="this.blur()">111cn.net</a><br />
<a href="link2.htm" onfocus="this.blur()">111cn.net</a><br />
<a href="link3.htm" onfocus="this.blur()">111cn.net</a>

  粗看或许没有感觉。但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,采用expression的优势现在就突现出来了。两者比较,哪个产生的冗余代码更多呢?
  采用expression的做法如下: 

 

 代码如下 复制代码
  a {star:expression(this.onFocus=this.blur())}

  说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非script内。这样就很容易地用一句话实现了页面中的链接虚线框的消除。
  需要引起你特别重视的:若不是非常特别的需要用到expression,一般不建议使用expression,因为expression对浏览器资源要求比较高。
  我们将在以后的文章中,写出一些关于expression应用的实例及用法的注意点,请关注我们的网站:我爱CSS-111cn.net。

时间: 2024-09-23 04:24:11

CSS中expression怎么用? CSS expression详解的相关文章

CSS中绝对定位absolute和相对定位relative详解

一.position语法与结构 position语法: position : static absolute relative position参数: static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过css z-index属性定义.此时对象不具有边距,但仍有补白和边框 relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文

CSS中对RGB颜色的使用详解

  RGB颜色模型解释 RGB颜色模型就是一种描述某个颜色里面有多少红.绿.蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样. 想象下如果你要配出一个纯蓝色,为了实现这个,你就不能把红色和绿色放进这个颜色里.所以我们就把红.绿设置为0%,把绿设置为100%: CSS Code复制内容到剪贴板 rgb(0%, 0%, 100%) 结果: 但如果你想要的不是蓝色而是紫红色,那该怎么办呢?我们可以通过将100%的红和100%的蓝混合起来得到紫红色: CSS Code复

JavaScript中的条件判断语句使用详解

这篇文章主要介绍了JavaScript中的条件判断语句使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 在写一个程序,可能有一种情况,当你需要采用一个路径出给定两个路径.所以,需要使用条件语句,让程序来做出正确的决策和执行正确的行动. JavaScript支持其用于执行根据不同的条件不同的操作条件语句.在这里,我们将解释if..else语句. JavaScript支持if..else语句的形式如下: if 语句 if...else 语句 if...else if... 语句. if 语

js基础之DOM中元素对象的属性方法详解_javascript技巧

在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

JavaScript中SetInterval与setTimeout的用法详解_javascript技巧

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

Android中asset和raw的区别详解_Android

*res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. *res/raw和assets的不同点: 1.res/raw中的文件会被映射到R.java文件中,访问的时候直接使用资源ID即R.id.filename:assets文件夹下的文件不会被映射到 R.java中,访问的时候需要AssetManager类. 2.res/raw不可以有目录结构,而assets则可以有目录结构,也就是assets目录下可以再建立文件夹 *读取文件资源

Struts中使用validate()输入校验方法详解_java

1.在ActionSupport中有一个validate()方法,这个方法是验证方法,它会在execute()方法执行之前执行,所以能够起到很好的验证的作用. @Override //重写Action中的validate()方法 public void validate() { if(null==this.username||this.username.length()<4||this.username.length()>6){ this.addActionError("userna

Android中asset和raw的区别详解

*res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. *res/raw和assets的不同点: 1.res/raw中的文件会被映射到R.java文件中,访问的时候直接使用资源ID即R.id.filename:assets文件夹下的文件不会被映射到 R.java中,访问的时候需要AssetManager类. 2.res/raw不可以有目录结构,而assets则可以有目录结构,也就是assets目录下可以再建立文件夹 *读取文件资源

JavaScript中String.match()方法的使用详解

  这篇文章主要介绍了JavaScript中String.match()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法用于当匹配针对正则表达式的字符串来检索匹配. 语法 ? 1 string.match( param ) 下面是参数的详细信息: param : 正则表达式对象 返回值: 如果正则表达式不包括g标志,返回的结果相同于regexp.exec(string) 如果正则表达式包含g标志,则该方法返回一个包含所有匹配的数组 例子: ? 1 2 3 4 5 6 7

Lua中break语句的使用方法详解

  这篇文章主要介绍了Lua中break语句的使用方法详解,是Lua入门学习中的基础知识,需要的朋友可以参考下 当循环中遇到break语句,循环立即终止,程序控制继续下一个循环语句后面. 如果您正在使用嵌套循环(即一个循环里面另一个循环),break 语句将停止最内层循环的执行并开始执行的下一行代码的程序后段. 语法 Lua break语句语法如下: 代码如下: break 例子: 代码如下: --[ local variable definition --] a = 10--[ while l