你不知道的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 ...
随机推荐
- JavaScript调试技巧之console.log()详解
JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...
- Asp.Net Mvc视图引擎Razor介绍
1.Razor介绍 1)ASP.NET MVC3 带来了一种新的名为Razor 的视图引擎,提供了下列优点: Razor 的语法简单且清晰,只需要最小化的输入 Razor 容易学习,语法类似于 C# ...
- MyBatis的Dao层注入SqlSession
有点坑爹,以前没用过Mybatis,最近才用,而且一直用Mybatis推荐的接口映射的方式,但是今天有人告诉我接口方式用得少,大多还是采用从配置文件里面读sql的方式,当然接口也是类似的,都是利用ma ...
- 未知的系统错误(The transaction is no longer active - status: 'Committed'. No further JDBC access is allowed within this transaction.)
被调用接口处理并发能力太脆弱导致的问题. 重新请求下即可.
- PHP获取不了React Native Fecth参数的解决办法代码是怎样?
fetch('https://mywebsite.com/endpoint/', { method: 'POST',headers: {'Accept': 'application/json','Co ...
- C#:实现托盘
1.向窗体上添加如下控件:MenuStrip menuStrip1, NotifyIcon ni_frmMain,Timer timer1, ContentMenuStrip cms_notify.其 ...
- 删除ecshop登录后台看到的系统信息
登陆ecshop后台,默认打开在页面顶部会出现个系统信息,显示操作系统,数据库版本,以及安装日期系统版本号.部分客户问到怎么删除,这里最模板提供ecshop教程告诉大家方法. 找到admin\temp ...
- PG_RMAN备份遇到 domain socket
在用pg_rman做数据全备时:出现异常错误! [postgres@sdserver40_210 run]$ pg_rman backup --backup-mode=full --progress ...
- 20151124001 关闭C#主窗体弹出是否关闭对话框
关闭C#主窗体弹出是否关闭对话框 private void Frm_Main_FormClosing(object sender, FormClosingEventArgs e) { ...
- 20150608_Andriod 发布方法
参考地址: http://www.jb51.net/article/42618.htm 第一步,在Eclipse中选择需要打包的项目,然后右键--选择Export,会弹出一个打包的提示框,如下图所示. ...