zoukankan      html  css  js  c++  java
  • 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>&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次以上的计算量。

    性能优化

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

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

  • 相关阅读:
    声明
    Random类——获取随机数
    JDK_API的使用方法
    Ajax?有谁开始学习了吗?
    用xslt循环xml同一节点的不同子节点
    在Repeater控件中嵌套一个Repeater控件
    html+css的一些技巧.收集中...
    记录一下: onbeforeunload()方法, 避免未保存而关闭页面.
    简单的C# Socket编程
    不实用的UriBuilder类
  • 原文地址:https://www.cnblogs.com/fanyx/p/9329832.html
Copyright © 2011-2022 走看看