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属性存在很多问题,最好的优化就是不使用该属性。

  • 相关阅读:
    软件开发与定制报价
    C# HttpHelper 1.0正式版发布
    C#仿QQ皮肤-TextBox 控件实现
    HTML5学习笔记第一节(智能提示和视频音频标签)
    C#多线程|匿名委托传参数|测试您的网站能承受的压力|附源代码升级版
    JavascriptHelp
    我的个人博客论坛版建立啦!
    Win7 + VirtualBox安装Mac OS X雪豹操作系统图文详解
    Sql2005性能工具(SQL Server Profiler和数据库引擎优化顾问)使用方法详解
    Webcast 系列课程 NET最全,最权威的学习资源
  • 原文地址:https://www.cnblogs.com/fanyx/p/9329832.html
Copyright © 2011-2022 走看看