css中你不知道的expression

最新推荐文章于 2021-08-04 09:58:25 发布

vivian_hnd

最新推荐文章于 2021-08-04 09:58:25 发布

阅读量252

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/vivian_wang07/article/details/79098675

版权

学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

今天看公司老项目
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>
</table>
</body>
</html>

上面的代码可以实现表格行背景色（#F8F8F8,#EFEFEF）交替出现，不需要每行单独定义。

bg是自己任意定义的属性。在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。

注意:

**不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高
CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。**

性能优化：

一个减少CSS Expression计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS Expression。

但CSS Expression还是有很多问题，所以尽量不要使用。