• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS中使用expression表达式

CSS中使用expression表达式

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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 属性重置。


或者


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

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06一个很有用的Firefox和IE插件
  • 2017-08-06使您的CSS网页布局代码更专业 精简CSS文件
  • 2017-08-06设计一个带选择和提示功能的检索框(分步介绍)
  • 2017-08-06css hack 记录
  • 2017-08-06CSS中针对IE6、7和FF等浏览器的特殊样式写法
  • 2017-08-06css样式图片、渐变、相关小知识(必看)
  • 2017-08-06css 标题一行图片 两行文字的排列方法以及相关问题处理
  • 2017-08-06CSS中使用text-transform实现首字母大写
  • 2017-08-06CSS水平对齐示例介绍
  • 2017-08-06利用纯CSS实现头像旋转和发光的效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用CSS3绘制三角形的简单方法
    • div 内table 居中实现代码
    • css网站布局实录学习笔记第一部分
    • 纯CSS3实现的8种Loading动画效果
    • css3实现超立体3D图片侧翻倾斜效果
    • 各大浏览器 CSS3 和 HTML5 兼容速查表 图文
    • 纯CSS+Div 的标签实现代码
    • div vertical-align不起作用解决办法
    • 浅谈CSS伪类与伪元素
    • table自动拉伸在chrome与IE中的兼容性问题解决

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有