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

  • 相关阅读:
    Kubernetes(六)创建自签证书
    Kubernetes(五)系统初始化
    Kubernetes(四)部署的三种方式
    Kubernetes(三)生产环境部署规划
    Kubernetes(二)核心概念
    Kubernetes(一)组件
    Net Core Add-Migration Build failed.最全解决排查方案
    Net Core3.1 目前MySql.Data.EntityFrameworkCore 8.0.18驱动包不兼容的问题
    软件设计-体系结构原则
    NET Core 3.1 PATCH The JSON value could not be converted to Microsoft.AspNetCore.JsonPatch.JsonPatchDocument`1[User.API.Models.AppUser]. Path
  • 原文地址:https://www.cnblogs.com/fanyx/p/9329832.html
Copyright © 2011-2022 走看看