概述

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. WebSocket技术

    webSocket技术 在html5技术革新中,加入了WebSocket技术 1.webSocket实际是TCP连接 webSocket在最初将发送http连接请求到服务器端, 但是在header中加 ...

  2. sublime text3083 破解 插件汉化

      sublime text  注册码 1. Sublime Text 2.x 版本 —– BEGIN LICENSE —– Andrew Weber Single User License EA7E ...

  3. android 获取资源文件 r.drawable中的图片转换为drawable、bitmap

    1.R-Drawable Resources resources = mContext.getResources(); Drawable drawable = resources.getDrawabl ...

  4. 学习BigDecimal用法

    一.简介 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...

  5. 用VMware 11.0虚拟机安装Win8 系统失败,提示“shsucdx can't install”

    研究了好久,网上那些更改bios的方法根本行不通,因为该版本的biso根本没有SATA选项!解决方法很简单,如下图: 重启虚拟机即可.

  6. /dev/ttySn(转)

    1.串行端口终端(/dev/ttySn)     串行端口终端(Serial Port Terminal)是使用计算机串行端口连接的终端设备.    计算机把每个串行端口都看作是一个字符设备.有段时间 ...

  7. tar.xz文件如何解压 (已验证)

    XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...

  8. linux下Gnome桌面环境的安装

    在实际工作中,无论是生产环境还是公司内部环境.很多时候装的linux系统都是最小化安装的.即没有桌面环境, 那么如果有时我们又需要一个桌面环境.该怎么安装呢?其实不难,现笔者将安装方法分享如下. 测试 ...

  9. ember.js:使用笔记10 常用方法

    init: controller中初始化方法,                               //注意该方法是在其他方法之前,所以取不出this,model等值: 跳转:this.tra ...

  10. 水题 HDOJ 4716 A Computer Graphics Problem

    题目传送门 /* 水题:看见x是十的倍数就简单了 */ #include <cstdio> #include <iostream> #include <algorithm ...