CSS中expression使用简介--IE8中不再使用的语法

正常访问状态！

http://www.guosp.com
碧海澜涛居
海纳百川，有容乃大。壁立千刃，无欲则刚！

关键词：

技术资料 >> DIV+CSS技术

搜索标签： expression IE8
CSS中expression使用简介--IE8中不再使用的语法
[阅读次数：1164次] [发布时间：2011年3月9日]
转载 http://hi.baidu.com/kxw102/blog/item/c2c4fc01bb09be8feb50cd65.html 定义 IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。　　1)给元素固有属性赋值　　例如，你可以依照浏览器的大小来安置一个元素的位置。 #myDiv { position: absolute; width: 100px; height: 100px; left: expression(document.body.offsetWidth - 110 + "px"); top: expression(document.body.offsetHeight - 110 + "px"); background: red; } 　　2)给元素自定义属性赋值　　例如，消除页面上的链接虚线框。通常的做法是： <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标签内，而非s cript内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 <style type="text/css"> input {star : expression(onmouseover=this.style.backgroundColor="#FF0000"; onmouseout=this.style.backgroundColor="#FFFFFF")} </style> <style type="text/css"> input {star : expression(onmouseover=this.style.backgroundColor="#FF0000"; 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对浏览器资源要求比较高。今天从IE的官方blog中看到了这篇文章——《Ending Expressions》。文章指出在IE8的标准模式下，将不再对CSS expression进行支持。也许有人会纷纷表示影响不大，因为有些人甚至都不知道什么是CSS的expression，也从来没有用过。但是，我感觉这个微软给予我们的信息，却是应该让人纷纷表示影响很大的。而这个信息就是——新一代的浏览器并不给保证优雅的向前兼容，必要的时候，会舍弃一些他们认为可以舍弃的内容。所以从今天开始，写网页的时候，请尽量的使用标准来写吧，一些hack和技巧还是减少使用吧。 IE8停止对CSS expression的支持，会不会使得以前使用了CSS expression的网页在IE8下无法使用呢？《Ending Expressions》这篇文章的最后给出了回答—— Pages on my web site depend on CSS expressions. How does this affect me ? Thanks to IE8’s new layout engine, most expressions written to work around CSS 2.1 bugs and shortcomings should no longer be needed; we expect unsupported or incorrectly interpreted properties to work in a standard, interoperable way. For those expressions supporting more specific purposes, anything they do is inherently achievable using standard JavaScript, usually interoperably and at lower runtime costs. The specifics will of course depend on your application. Based on your feedback to this post, we may visit examples in future installments. 简单的说来就是——对不起，帮不了你，您老人家还是改成JavaScript或者其他办法实现吧。不知道这会不会造成大批的网页从此只能在IE5-IE7上使用（从IE5才开始支持CSS expression）呢？也许吧。你说，做个网页咋就那么难呢？既要考虑浏览器以前的版本，还要考虑浏览器以后的版本，最可恶的是，还不是就IE一种浏览器。本页地址： [复制地址] 该页内容非本站原创收藏自：http://ilovejsj.javaeye.com/blog/610692
返回顶部

评论统计（0条）| 我要评论

暂无评论内容！

我要评论

我要评论：

带*部分需要填写

姓名称呼：

* 请填写您的姓名或呢称

联系方式：

QQ,MSN,Email都可以，方便交流 (仅管理员可见)

评论内容：

* 不超过100字符，50汉字

验证码：

推荐链接

最近更新

·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印－终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...

碧海澜涛居

网站首页｜关于本站｜站长简介｜开发案例｜技术资料｜美文日志｜摄影相册｜读书收藏｜影视收藏｜留言板

免责声明：本站为个人网站，站内所有文字、图片等各类资料均为个人兴趣爱好所收集，不用作任何商业用途，亦不保证资料的真实性，若有因浏览本站内容而导致的各类纠纷，本站也不承担任何责任。本站部分内容来自互联网，如有涉及到您的权益或隐私请联系站长解决。