CSS expression属性
expression属性是在IE5版本之后支持使用的，用来把CSS属性和JavaScript脚本关联起来。简单粗暴的说，该属性是用来调用JavaScript代码的。
CSS属性后面是一段JavaScript代码，CSS的值是JavaScript表达式计算的结果。
给元素固有属性赋值
.box1{
position: absolute;
top: expression(eval(document.documentElement.scrollTop+80)); /* 这里需要获取滚动高度+元素原本的高度 */
z-index: 999;
}
document.documentElement.scrollTop 的意思是获取当前页面滚动条所滚动到的位置的数值，而再用eval()函数把它计算成数值。
这句代码最终的意思就是：你浏览器窗口的滚动条滑到哪，这个元素的位置就在哪。
给元素自定义属性赋值
用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 expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作 ...
- 实现最小宽度的几种方法及CSS Expression[转]
实现最小宽度的几种方法及CSS Expression[转] 实现最小宽度的几种方法:css表达式尽量不用 支持FF IE7 IE6 .test { background:blue; min-widt ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
- 【转】CSS z-index 属性的使用方法和层级树的概念
文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...
- css之属性部分
这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...
随机推荐
- maya2018卸载/安装失败/如何彻底卸载清除干净maya2018注册表和文件的方法
maya2018提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2018失败提示maya2018安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- JavaScript中JSON对象和JSON字符串的相互转化
一.JSON字符串转换为JSON对象 var str = '{"name":"cxh","sex":"man",&quo ...
- 安装过redis集群，重新做集群办法：
二:找到问题:这个地方IP的问题,以上是正确的版本,以前有问题的版本的Ip是127.0.0.1, 原因是这个地方以前我没注释redis.conf文件中的bind 127.0.0.1 然后做集群时使用的 ...
- 使用 Maven 插件将 class（字节码文件），resource（资源文件），lib（依赖的jar包）分开打包
1. 在pom文件中对各个插件进行配置 <?xml version="1.0" encoding="UTF-8"?> <project xml ...
- 第六篇: 分布式配置中心(Spring Cloud Config)
一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件. 在Spring Cloud中,有分布式配置中心组件spring cloud confi ...
- Shell - 文本处理
珠玉在前,不再赘言. 常用命令 LinuxShell文本处理工具集锦 数据工程师常用的Shell命令 文件和目录管理 简明教程 AWK简明教程 SED简明教程 命令详解 linux sort,uniq ...
- 必须熟练的基础linux命令
推荐:命令大全 http://man.linuxde.net/ 重要的几个热键[Tab],[ctrl]-c, [ctrl]-d [Tab]按键---具有『命令补全』不『档案补齐』的功能 [Ctrl]- ...
- setInterval()、clearInterval()、setTimeout()和clearTimeout() js计数器方法（还有第三个参数）
用法是会用,但是之前一直以为接函数的 var a = setInterval(function(){},1000) 比如a是函数名,最近才发现它是一个ID, var intervalID = wind ...
- CentOS 6.5静态IP的设置（NAT和桥接联网方式都适用）
不多说,直接上干货! 为了方便,用Xshell来.并将IP设置为静态的.因为,在CentOS里,若不对其IP进行静态设置的话,则每次开机,其IP都是动态变化的,这样会给后续工作带来麻烦.为此,我们需将 ...
- 从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...