你不知道的css中的expression
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> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </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的更多相关文章
- css中的expression
最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...
- CSS中的行为——expression
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一段J ...
- ie浏览器css中的行为expression详解
CSS中的行为——expression (ie only) 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因 ...
- CSS中表示cellpadding和cellspacing的方法
本文和大家重点讨论一下用CSS来表示表格的cellpadding和cellspacing方法,表格的cellpadding和cellspacing我们经常会用一定的方式来清除默认样式,请看下文详细介绍 ...
- CSS中新属性calc()
CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...
- CSS中的偏僻知识点
一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...
- 优化网站设计(七):避免在CSS中使用表达式
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
- 《你不知道的 CSS》之等比例缩放的盒子
你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别 ...
- 一些你不知道的css特性【一】
浏览器禁止用户在标签的style中使用js写入"!important"的特性 我们在使用jQuery设置css的时候 $('#text').css('height', '200px ...
随机推荐
- 160905、c3p0详细配置
官方文档 : http://www.mchange.com/projects/c3p0/index.html <c3p0-config> <default-config> &l ...
- Java中的排序算法(2)
Java中的排序算法(2) * 快速排序 * 快速排序使用分治法(Divide and conquer)策略来把一个序列(list)分为两个子序列(sub-lists). * 步骤为: * 1. 从数 ...
- MyEclipse下搭建maven项目
由于maven在构建项目方面确实比较出色,现今绝大多数人构建项目都采用maven,而且绝大多数人都采用eclipse作为开发环境,今天我用myeclipse搭建了一个demo,虽然基本上不会采用mye ...
- jmeter使用笔记
接口测试 http协议 接口分成两类,一类是查询功能的接口,一类是保存数据功能的接口. 保存逻辑:数据传入进来,验证通过.保存到数据表中 使用jmeter接口测试的步骤 1.首先添加线程组. 2.配置 ...
- Linux sar分析网卡流量
yum install sysstat sar -n { DEV | EDEV | NFS | NFSD | SOCK | ALL } sar 提供六种不同的语法选项来显示网络信息.-n选 ...
- 通达OA 指纹考勤机接口 源代码
通达oa2011已经支持 指纹考勤机 但只限中控iclock660 这款2000大洋的型号 通过本文的开发接口,可以与任意一款指纹机集成, 需求指纹机管理软件能实时保存数据 我这里用的是 中控u16 ...
- Python+Django+Eclipse 在Windows下快速开发自己的网站
一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...
- Shopping(SPFA+DFS HDU3768)
Shopping Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- 周赛-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 ...
- 窗体移动API
//窗体移动API [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport ...