您现在的位置是：网站首页> 编程资料编程资料

CSS中使用expression表达式CSS expression判断表达式设置input样式CSS expression在Chrome的问题优化浏览器渲染避免CSS expressionsCSS中使用expression完美设置页面最小宽度(兼容ie)css expression使用概述及其优缺点介绍CSS行为expression轻松实现IE6无抖动固定定位CSS表达式(expression)解决IE6 position:fixed无效问题

2021-09-06 796人已围观

简介这篇文章主要介绍了CSS中使用expression表达式,需要的朋友可以参考下

逛到发现这个效果，个人感觉非常赞

下面是CSS样式

input {
border:1px solid #B3D6EF;　
background:#ffffff;
}
input {
    star : expression(
    onmouseover=function(){this.style.backgroundColor="#D5E9F6"},
    onmouseout=function(){this.style.backgroundColor="#ffffff"})
    }

好处在于不用在页面中写一堆一堆的onMouseover函数了

lolo
有些问题需要注意下，这种写法有可能在IE6下造成浏览器卡死，目前做的一个旧出现了卡死现象...

这里引用下怪飞的一篇CSS优化的文章

浏览器中 CSS Expression 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。
如何对 CSS Expression 进行优化呢？
至少：如果我们将 CSS Expression 在匹配的元素中仅执行一次，性能将会提升很大。

old9 在《CSS Expression Reloaded》一文中提供了一个解决方案：

在 CSS Expression 语句体里，将触发该 Expression 的 CSS 属性重置。

复制代码

代码如下:

div {
zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}

或者

复制代码

代码如下:

div {
-singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));
}

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

关于Expression,雅虎团队提到这些

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

上一篇：CSS3 实现侧边栏展开收起动画CSS3超酷环形动画菜单其子菜单可环绕展开CSS3华丽的Tab菜单当鼠标滑过时会出现展开动画纯CSS3实现的横向和纵向鼠标滑过手风琴自动展开效果基于jquery+css3实现左右摇摆可滑动展开折叠圆形导航菜单CSS3+HTML5+JS 实现一个块的收缩与展开动画效果

下一篇：css3实现3D色子翻转特效CSS实现卡片3D翻转效果的示例代码一款基于css3麻将筛子3D翻转特效的实例教程css3的图形3d翻转效果应用示例简单几步用纯CSS3实现3D翻转效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢