概述

CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。

兼容性


expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。

例子


隔1s切换一次背景颜色 input鼠标移入移出变换背景

body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}
input
{
star : expression(
onmouseover=function(){this.style.backgroundColor="green"},
onmouseout=function(){this.style.backgroundColor="red"}
)
}
<body >
<input type="text"/>
</body>

问题


算频率要比我们想象的多。千上万次并且可能会对你页面的性能产生影响。

  • 页面显示缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。随便移动鼠标都可以轻松达到10000次以上的计算量。

查看方式

  • 给CSS表达式增加一个计数器可以跟踪表达式的计算频率。

解决方案

  • this使用
  • 使用一次性表达式
  • 如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法?
  • 使用jQuery方法代替

移除


在IE中,CSS是可以嵌入js表达式的,可以在CSS类中定义,但是将含有表达CSS类从DOM对象中移除,样式表达式是不会失效的。

需要使用js调用style对象的removeexpression_r()方法才可去除。

如:width:expression_r(this.width > 730 ? "730px" : true);

需要使用:

$('#test')[0].style.removeexpression_r('width');去掉。

废弃


http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

不再支持CSS表达式的原因

  • 更加符合标准
  • 更加有利于性能提升
  • 以及减少受攻击面

CSS系列:表达式(Expression)`淘汰`的更多相关文章

  1. 你应该了解的强大CSS表达式 ----- expression

    IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一 ...

  2. .net 系列:Expression表达式树、lambda、匿名委托 的使用

    首先定义一个泛型委托类型,如下: public delegate T Function<T>(T a, T b); 实现泛型委托的主体代码,并调用: public static strin ...

  3. css中的expression

    最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...

  4. 你不知道的css中的expression

    expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,[这里的CSS属性可以是元素固有的属性,也可以是自定义属性.]是动态设置CSS属性的强大方法,但也 ...

  5. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  6. css系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...

  7. lambda表达式Expression<Func<Person, bool>> 、Func<Person, bool>区别

    前言: 自己通过lambda表达式的封装,将对应的表达式转成字符串的过程中,对lambda表达式有了新的认识 原因: 很多开发者对lambda表达式Expression<Func<Pers ...

  8. CSS系列 (05):浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  9. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

随机推荐

  1. CodeForces - 416A (判断大于小于等于 模拟题)

    Guess a number! Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Sub ...

  2. Zookeeper笔记(四)Zookeeper在Dubbo中的应用

    Zookeeper在Dubbo中的应用 Dubbo的架构 节点角色说明: Provider: 暴露服务的服务提供方.Consumer: 调用远程服务的服务消费方.Registry: 服务注册与发现的注 ...

  3. ***CI新增记录成功后的返回值判断,是用isset还是empty

    Q: 新增记录插入成功后,加了一个return $this->db->insert_id(); $digg_id = $this->m_feed_digg->create(js ...

  4. oracle 10g 学习之游标使用和异常介绍(11)

    一.游标 1. 使用游标 要求: 打印出 80 部门的所有的员工的工资: salary: xxx declare --1. 定义游标 cursor salary_cursor is select sa ...

  5. sdut 2411:Pixel density(第三届山东省省赛原题,字符串处理)

    Pixel density Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Pixels per inch (PPI) or pi ...

  6. hdu 4584 水题爽一发 *

    #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> #i ...

  7. OUYA设备的购买和安装

    OUYA设备的购买和安装 在为OUYA这款游戏终端做具体的开发之前,建议读者先上手感受一下这款设备的游戏体验.本节所涉及的内容包括,OUYA设备的购买.安装.设置,以及最终上手开始游戏这一系列的过程本 ...

  8. 直接操作游戏对象C#游戏开发

    直接操作游戏对象C#游戏开发 2.2.3  直接操作游戏对象 在Inspector视图里通过设置属性而改变游戏场景中游戏对象的状态,太过抽象,毕竟数字并不够直观.其实,改变游戏对象的状态,完全有最最直 ...

  9. maven 编译报错 “找不到符号”

    报错如下: E:\workspace\iccardcore\mis\src\main\java\com\hxsmart\sicard\core\webapp\action\process\DayEnd ...

  10. POJ1947 Rebuilding Roads(树形DP)

    题目大概是给一棵树,问最少删几条边可以出现一个包含点数为p的连通块. 任何一个连通块都是某棵根属于连通块的子树的上面一部分,所以容易想到用树形DP解决: dp[u][k]表示以u为根的子树中,包含根的 ...