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边框属性允许你指定一个元素边框的样式和颜色. ...
随机推荐
- U-boot中SPL功能和源码流程分析
在U-boot目录下,有个比较重要的目录就是SPL的,SPL到底是什么呢?为什么要用它呢? SPL(Secondary programloader)是uboot第一阶段执行的代码.主要负责搬移uboo ...
- 推荐一个实用的 .gitignore 文件
为什么要忽略文件? 常用的版本控制工具,不管是使用 git 还是 svn,我们都需要排除一些与程序代码无关的文件,如像 eclipse/ intellij idea 等 IDE 工具留下来的 .set ...
- win10 + gluon + GPU
1. 下载教程 可以用浏览器下载zip格式并解压,在解压目录文件资源管理器的地址栏输入cmd进入命令行模式. 也可以 git pull https://github.com/mli/gluon-tut ...
- shell编程中如何执行oracle语句
shell编程中如果向oracle中插入数据之类的,需要先把执行语句放到文件中,然后再@这个文件执行 有如下俩种方式供参考: SQL=`sqlplus user/pwd@orains << ...
- (转)内核模块操作命令-lsmod+rmmod+modinfo+modprobe
原文:http://watchmen.xin/2018/07/13/IT%E7%A7%91%E5%AD%A6%E6%8A%80%E6%9C%AF%E7%9F%A5%E8%AF%86%E4%BD%93% ...
- Intellij-插件安装-JRebel热部署插件安装
环境介绍: Win7.JDK1.8.maven+jetty插件.SpringMVC.Intellij IDEA 2018.1.2 安装插件: 在线安装: Settings --> Plugins ...
- mysql 开发进阶篇系列 27 数据库字符集设置
在安装完数据库后,使用汉字插入到表中,会报错,需要修改字符集类型,如下图所示: -- 插入汉字时报错 INSERT INTO User2 VALUES('张三') -- 查看字符集 SHOW VARI ...
- byte数组转float 以及byte转其他类型时为什么要&0xff
static final char[] HEX_CHARS = "0123456789abcdef".toCharArray(); //转换为十六进制 public static ...
- NIO ServerSocketChannel ScoketChannel
package com.yb.nio; import java.io.IOException; import java.net.InetSocketAddress; import java.net.S ...
- PHP打印指定日期
打印某一日期的前一天 echo date("Y-m-d",(strtotime("2009-01-01") - 3600*24)); (1)打印明天此时的时间戳 ...