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. 160909、Filter多方式拦截、禁用IE图片缓存、Filter设置字符编码

    dispatcher多方式拦截 我们来看一个例子 我们定义一个index.jsp,里面有一个链接跳转到dispatcher.jsp页面 <body> <a href="di ...

  2. LCD参数解释及计算【转】

    转自:http://blog.csdn.net/longxiaowu/article/details/24319933 Linux内核的amba lcd控制器使用clcd_panel结构体表示一个LC ...

  3. jQuery 遍历函数(w3school)

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...

  4. 【转载】使用barman备份PostgreSQL

    什么是barman Barman (备份和恢复管理器) 是 PostgreSQL 数据库服务器中非常方便的备份和恢复工具,允许远程备份多个服务器,允许从一个备份集中一个命令就恢复数据库.同时还可以对多 ...

  5. 20145227 《Java程序设计》第7周学习总结

    20145227 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lambda表达式的情 ...

  6. linux 时钟源初步分析linux kernel 时钟框架详细介绍

    初步概念: 看datasheet的关于时钟与定时器的部分, FCLK供给cpu, HCLK供给AHB总线设备(存储器控制器,中断控制器.LCD控制器.DMA.USB主机控制器等), PCLK供给APB ...

  7. SDUT 2877:angry_birds_again_and_again

    angry_birds_again_and_again Time Limit: 2000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 The problems ...

  8. jqeury之平移轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. getopts

    http://blog.sina.com.cn/s/blog_81c2cf020100v0wh.html http://www.cnblogs.com/xiangzi888/archive/2012/ ...

  10. Discuz! 6.x/7.x 全局变量防御绕过导致命令执行

    https://www.secpulse.com/archives/2338.html 模拟register_globals功能的代码,在GPC为off时会调用addslashes()函数处理变量值, ...