CSS expression属性实现javascript与CSS完美结合

开发 前端
你对CSS expression属性的用法是否了解,这里向大家做一下说明,在IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来。

本文向大家描述一下CSS expression属性如何将javascript与CSS结合起来,CSS中使用expression可以把CSS属性和Javas cript表达式关联起来,也就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。

CSS expression属性将javascript与CSS结合起来

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

给元素固有属性赋值

  例如,你可以依照浏览器的大小来安置一个元素的位置。

 Example Source Code  

  1. #myDiv {  
  2. position: absolute;  
  3. width: 100px;  
  4. height: 100px;  
  5. left: expression(document.body.offsetWidth - 110 + “px”);  
  6. top: expression(document.body.offsetHeight - 110 + “px”);  
  7. background: red;  
  8. }  

给元素自定义属性赋值

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

 Example Source Code  

  1. <a href=”link1.htm” onfocus=”this.blur()”>link1</a> 
  2. <a href=”link2.htm” onfocus=”this.blur()”>link2</a> 
  3. <a href=”link3.htm” onfocus=”this.blur()”>link3</a> 
  4.  

  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?

◆采用expression的做法如下:

 Example Source Code

  1. <style type=”text/CSS”> 
  2. a {star : expression(onfocus=this.blur)}  
  3. </style> 
  4. <a href=”link1.htm”>link1</a> 
  5. <a href=”link2.htm”>link2</a> 
  6. <a href=”link3.htm”>link3</a> 
  7.  

说明:

里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

 Example Source Code

  1. <style type=”text/CSS”> 
  2. input  
  3. {star : expression(onmouseover=this.style.backgroundColor=”#FF0000″;  
  4. onmouseout=this.style.backgroundColor=”#FFFFFF”)}  
  5. </style> 
  6. <style type=”text/CSS”> 
  7. input {star : expression(onmouseover=this.style.backgroundColor=”#FF0000″;  
  8. onmouseout=this.style.backgroundColor=”#FFFFFF”)}  
  9. </style> 
  10. <input type=”text”> 
  11. <input type=”text”> 
  12. <input type=”text”> 
  13.  

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

 Example Source Code

  1. <style type=”text/CSS”> 
  2. input {star : expression(onmouseover=function()  
  3. {this.style.backgroundColor=”#FF0000″},  
  4. onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }  
  5. </style> 
  6. <input type=”text”> 
  7. <input type=”text”> 
  8. <input type=”text”> 
  9.  

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

◆实例:利用CSS里expression来实现界面对象的批量控制

问题说明: 用过CSS样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src=”**.jpg”> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?

解决方法: 使用CSS的expression方法。

具体实现要看看.CSS的写法:

 Example Source Code

  1. /*替换图片CSS*/  
  2. #imgScript { /*这里使用对象ID来通配样式, 也可以定义一个CSS函数*/  
  3. star:expression(  
  4. onmouseover = function()  
  5. {  
  6. /*替换图片*/  
  7. if(this.hover != null){  
  8. thisthis.name = this.src;  
  9. thisthis.src = this.src.replace(’.jpg’, ‘_over.jpg’);  
  10. this.HasChg = 1;  
  11. }  
  12. },  
  13. onmouseout = function()  
  14. {  
  15. /*还原本来的图片*/  
  16. if(this.HasChg != null){  
  17. thisthis.src = this.name;  
  18. this.HasChg = null;  
  19. }  
  20. }  
  21. )  
  22.  
  23. }/*end imgScript*/  

【编辑推荐】

  1. CSS网页布局中简单实用八个技巧
  2. DIV CSS布局中绝对定位和浮动用法
  3. CSS网页布局中文字排版九大技巧
  4. CSS基础:解析padding与line-height属性区别
  5. 解决CSS网页布局中IE与Firefox兼容问题

 

责任编辑:佚名 来源: 52CSS.com
相关推荐

2010-09-03 12:46:28

CSSexpression

2010-09-07 16:46:59

CSSexpression

2010-09-30 14:55:23

Javascriptfloat

2010-08-23 10:11:22

CSSfloatJavaScript

2010-09-13 14:09:35

CSS文字

2010-08-31 15:07:45

CSS居中

2010-09-10 15:23:54

CSS匹配CSS

2010-09-07 14:53:45

Chroma属性CSS

2010-09-13 10:23:06

CSS

2010-08-26 15:44:20

CSSexpression

2017-04-27 14:05:59

CSS动画前端

2010-08-25 15:34:48

CSSoverflow

2010-09-07 16:21:37

CSSDisplayVisibility

2010-08-31 14:49:57

CSS居中

2024-03-20 09:40:27

动画技巧CSS逐帧动画

2009-03-10 11:19:32

DIVCSS分页打印

2010-08-25 14:26:09

CSSdisplay

2010-09-06 10:21:15

CSS 列表

2010-08-25 16:03:26

CSSborder

2010-08-23 15:33:47

CSSpadding
点赞
收藏

51CTO技术栈公众号