建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

CSS中使用expression表达式

更新时间:2016-12-29整理编辑:建站学习网阅读:0

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

  下面是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表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

本文网址:https://www.dedexuexi.com/divcss/jc/1647.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
CSS控制文字在Div最底部显示
« 上一篇2016年12月29日
CSS定义标题的实例讲解
2016年12月29日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询

添加微信客服