• 你不知道的css中的expression


    expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,【这里的CSS属性可以是元素固有的属性,也可以是自定义属性。】是动态设置CSS属性的强大方法,但也存在着一定的危险性。 

    CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。

    在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

    1,给元素固有属性赋值

    1 #div{
    2 position:absolute;
    3 left:expression(document.body.offsetWidth-200+"px");  
    4 top:expression(document.body.offsetHeight-250+"px");  
    5 }

    给一个div设置其左边距和上边距。document.body.offsetWidth是当前网页可见区域宽度。

    2、给元素自定义属性赋值

    用CSS自定义属性Expression对表格行间隔背景批量定义

     1 <html>
     2 <head>
     3 <title></title>
     4 <style type="text/css">
     5 tr{ bg:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }
     6 </style>
     7 </head>
     8 <body>
     9 <table width="100%" border="0">
    10   <tr>
    11     <td>&nbsp;</td>
    12   </tr>
    13 <tr>
    14     <td>&nbsp;</td>
    15   </tr>
    16   <tr>
    17     <td>&nbsp;</td>
    18   </tr>
    19   <tr>
    20     <td>&nbsp;</td>
    21   </tr>
    22   <tr>
    23     <td>&nbsp;</td>
    24   </tr>
    25   <tr>
    26     <td>&nbsp;</td>
    27   </tr>
    28   <tr>
    29     <td>&nbsp;</td>
    30   </tr>
    31   <tr>
    32     <td>&nbsp;</td>
    33   </tr>
    34   <tr>
    35     <td>&nbsp;</td>
    36   </tr>
    37 </table>
    38 </body>
    39 </html>

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

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

    注意:

    不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高

    CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

    性能优化:

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

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

  • 相关阅读:
    中国的信息产业一定由中国的工商业养活,中国的工商业一定要养活自己的信息产业
    2017-2018-1 20155201 《信息安全系统设计基础》第十三周学习总结
    2017-2018-1 20155201 实验五 通讯协议设计
    《深入理解计算机系统》第二章 信息的表示与处理
    2017-2018-1 20155201 《信息安全系统设计基础》第十一周学习总结
    2017-2018-1 20155201 实验四 外设驱动程序设计
    信息安全技术 实验四 木马及远程控制技术
    实验四
    2017-2018-1 20155201 《信息安全系统设计基础》第九周学习总结
    cmder使用手册
  • 原文地址:https://www.cnblogs.com/hsprout/p/5041241.html
Copyright © 2020-2023  润新知