CSS expression属性

时间 2019-12-10

标签 css expression 属性栏目 CSS 繁體版

原文原文链接

expression属性是在IE5版本以后支持使用的，用来把CSS属性和JavaScript脚本关联起来。简单粗暴的说，该属性是用来调用JavaScript代码的。css

CSS属性后面是一段JavaScript代码，CSS的值是JavaScript表达式计算的结果。html

给元素固有属性赋值

.box1{
    position: absolute;
    top: expression(eval(document.documentElement.scrollTop+80)); /* 这里须要获取滚动高度+元素本来的高度 */
    z-index: 999;
}

document.documentElement.scrollTop 的意思是获取当前页面滚动条所滚动到的位置的数值，而再用eval()函数把它计算成数值。express

这句代码最终的意思就是：你浏览器窗口的滚动条滑到哪，这个元素的位置就在哪。浏览器

给元素自定义属性赋值

用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>
   <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次以上的计算量。code

性能优化

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

CSS expression属性存在不少问题，最好的优化就是不使用该属性。

1. CSS自定义属性Expression
2. CSS content 属性 CSS counter-increment 属性 CSS counter-reset 属性
3. CSS position属性、float属性
4. Expression 使之支持css的一些属性
5. css属性
6. CSS display属性
7. CSS filter 属性
8. css display:flex 属性
9. CSS 属性
10. css-counter属性
更多相关文章...
• W3C CSS 活动 - W3C 教程
• CSS 指南 - 网站建设指南
• JDK13 GA发布：5大特性解读
• 互联网组织的未来：剖析GitHub员工的任性之源