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

CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。

在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

1,给元素固有属性赋值

 #div{
position:absolute;
left:expression(document.body.offsetWidth-200+"px");
top:expression(document.body.offsetHeight-250+"px");
}

给一个div设置其左边距和上边距。document.body.offsetWidth是当前网页可见区域宽度。

2、给元素自定义属性赋值

用CSS自定义属性Expression对表格行间隔背景批量定义

 <html>
<head>
<title></title>
<style type="text/css">
tr{ bg:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }
</style>
</head>
<body>
<table width="100%" border="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

上面的代码可以实现表格行背景色(#F8F8F8,#EFEFEF)交替出现,不需要每行单独定义。

bg是自己任意定义的属性。在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非script内。

注意:

不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

性能优化:

一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。

CSS Expression还是有很多问题,所以尽量不要使用。

你不知道的css中的expression的更多相关文章

  1. css中的expression

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

  2. CSS中的行为——expression

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

  3. ie浏览器css中的行为expression详解

    CSS中的行为——expression (ie only) 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因 ...

  4. CSS中表示cellpadding和cellspacing的方法

    本文和大家重点讨论一下用CSS来表示表格的cellpadding和cellspacing方法,表格的cellpadding和cellspacing我们经常会用一定的方式来清除默认样式,请看下文详细介绍 ...

  5. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

  6. CSS中的偏僻知识点

    一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...

  7. 优化网站设计(七):避免在CSS中使用表达式

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  8. 《你不知道的 CSS》之等比例缩放的盒子

    你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别 ...

  9. 一些你不知道的css特性【一】

    浏览器禁止用户在标签的style中使用js写入"!important"的特性 我们在使用jQuery设置css的时候 $('#text').css('height', '200px ...

随机推荐

  1. 160905、c3p0详细配置

    官方文档 : http://www.mchange.com/projects/c3p0/index.html <c3p0-config> <default-config> &l ...

  2. Java中的排序算法(2)

    Java中的排序算法(2) * 快速排序 * 快速排序使用分治法(Divide and conquer)策略来把一个序列(list)分为两个子序列(sub-lists). * 步骤为: * 1. 从数 ...

  3. MyEclipse下搭建maven项目

    由于maven在构建项目方面确实比较出色,现今绝大多数人构建项目都采用maven,而且绝大多数人都采用eclipse作为开发环境,今天我用myeclipse搭建了一个demo,虽然基本上不会采用mye ...

  4. jmeter使用笔记

    接口测试 http协议 接口分成两类,一类是查询功能的接口,一类是保存数据功能的接口. 保存逻辑:数据传入进来,验证通过.保存到数据表中 使用jmeter接口测试的步骤 1.首先添加线程组. 2.配置 ...

  5. Linux sar分析网卡流量

    yum install sysstat    sar -n { DEV | EDEV | NFS | NFSD | SOCK | ALL }    sar 提供六种不同的语法选项来显示网络信息.-n选 ...

  6. 通达OA 指纹考勤机接口 源代码

    通达oa2011已经支持 指纹考勤机  但只限中控iclock660 这款2000大洋的型号 通过本文的开发接口,可以与任意一款指纹机集成, 需求指纹机管理软件能实时保存数据 我这里用的是 中控u16 ...

  7. Python+Django+Eclipse 在Windows下快速开发自己的网站

    一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...

  8. Shopping(SPFA+DFS HDU3768)

    Shopping Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  9. 周赛-Equidistant String 分类: 比赛 2015-08-08 15:44 6人阅读 评论(0) 收藏

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  10. 窗体移动API

    //窗体移动API [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport ...