html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

CSS中使用expression表达式_CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
这篇文章主要介绍了CSS中使用expression表达式,需要的朋友可以参考下

逛到发现这个效果,个人感觉非常赞 YK5HTML5中文学习网 - HTML5先行者学习网

下面是CSS样式 YK5HTML5中文学习网 - HTML5先行者学习网

input {  YK5HTML5中文学习网 - HTML5先行者学习网
border:1px solid #B3D6EF;   YK5HTML5中文学习网 - HTML5先行者学习网
background:#ffffff;   YK5HTML5中文学习网 - HTML5先行者学习网
YK5HTML5中文学习网 - HTML5先行者学习网
input {  YK5HTML5中文学习网 - HTML5先行者学习网
    star : expression(  YK5HTML5中文学习网 - HTML5先行者学习网
    onmouseover=function(){this.style.backgroundColor="#D5E9F6"},  YK5HTML5中文学习网 - HTML5先行者学习网
    onmouseout=function(){this.style.backgroundColor="#ffffff"})  YK5HTML5中文学习网 - HTML5先行者学习网
    }  YK5HTML5中文学习网 - HTML5先行者学习网

YK5HTML5中文学习网 - HTML5先行者学习网
好处在于 不用在页面中写一堆一堆的onMouseover函数了 YK5HTML5中文学习网 - HTML5先行者学习网

lolo YK5HTML5中文学习网 - HTML5先行者学习网
有些问题需要注意下,这种写法有可能在IE6下造成浏览器卡死,目前做的一个旧出现了卡死现象... YK5HTML5中文学习网 - HTML5先行者学习网

这里引用下怪飞的一篇CSS优化的文章 YK5HTML5中文学习网 - HTML5先行者学习网

浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。 YK5HTML5中文学习网 - HTML5先行者学习网
如何对 CSS Expression 进行优化呢? YK5HTML5中文学习网 - HTML5先行者学习网
至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。 YK5HTML5中文学习网 - HTML5先行者学习网

old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案: YK5HTML5中文学习网 - HTML5先行者学习网
YK5HTML5中文学习网 - HTML5先行者学习网
在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。YK5HTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
YK5HTML5中文学习网 - HTML5先行者学习网
div { YK5HTML5中文学习网 - HTML5先行者学习网
zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this)); YK5HTML5中文学习网 - HTML5先行者学习网
} YK5HTML5中文学习网 - HTML5先行者学习网
YK5HTML5中文学习网 - HTML5先行者学习网

或者 YK5HTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
YK5HTML5中文学习网 - HTML5先行者学习网
div { YK5HTML5中文学习网 - HTML5先行者学习网
-singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this)); YK5HTML5中文学习网 - HTML5先行者学习网
} YK5HTML5中文学习网 - HTML5先行者学习网
YK5HTML5中文学习网 - HTML5先行者学习网

说明一下~: YK5HTML5中文学习网 - HTML5先行者学习网
CSS Expression 执行在任意一个匹配的元素上。 YK5HTML5中文学习网 - HTML5先行者学习网
在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。 YK5HTML5中文学习网 - HTML5先行者学习网
CSS 属性选用一些不常用的属性来触发,触发完重置回默认值。 YK5HTML5中文学习网 - HTML5先行者学习网

关于Expression,雅虎团队提到这些 YK5HTML5中文学习网 - HTML5先行者学习网

避免使用CSS表达式(Expression)  YK5HTML5中文学习网 - HTML5先行者学习网
      CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色: YK5HTML5中文学习网 - HTML5先行者学习网
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );  YK5HTML5中文学习网 - HTML5先行者学习网
如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。 YK5HTML5中文学习网 - HTML5先行者学习网
      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。 YK5HTML5中文学习网 - HTML5先行者学习网
      一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。 

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助