CSS Expression用法总结

CSS Expression用法总结

转自http://www.chencheng.org/demo/css-expression.php

CSS Expression,动态 CSS 属性,IE 私有,自 5.0 开始引入(IE8 将不再支持),参考 MSDN,不过有时用javascript动态生成它作为IE6的hack还是不错的!

这东西的优点:

  • 使 CSS 属性动态生成,所以基本 js 能干的它都能干
  • 使用 CSS 选择符,比 js 遍历到某个特定元素要方便得多

这东西的缺点:

  • expression 会反复执行,有严重的效率问题。它的触发似乎不是通过事件,而是通过 interval 一类的机制。
  • 别的浏览器不支持,IE8 也将不再支持
  1. IE6 的背景闪烁 Bug Fix
    1. body {
    2.     zoom: expression(function(el){
    3.     document.execCommand('BackgroundImageCache', false, true);
    4.     el.style.zoom = '1';
    5.     }(this));
    6. }
  2. 给不同 type 的 input 赋予不同的样式
    1. input {
    2.     zoom: expression(function(el){
    3.         el.style.zoom = "1";
    4.         el.className ? el.className+=" "+el.type : el.className=el.type;
    5.     }(this));
    6. }
  3. 隔行换色(zebra lists)
    01. .test {
    02.     unicode-bidi: expression(function(el){
    03.         el.style.unicodeBidi = "normal";
    04.         var childs = el.getElementsByTagName("li");
    05.         for(var i=0; i<childs.length; i++){
    06.             (i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
    07.         }
    08.     }(this));
    09. }
  4. 模拟 :before 或者 :after
    01. .test {
    02.     letter-spacing: expression(function(el){
    03.         el.style.letterSpacing = "0";
    04.         var newchild = document.createElement("span");
    05.         newchild.className="after";
    06.         newchild.appendChild(document.createTextNode(" World!"));
    07.         el.appendChild(newchild);
    08.     }(this));
    09. }
  5. 模拟图片的:max-width 和 max-height (或 min-width 和 min-height)

    01. .max-width span img {
    02.     max-width:120px;
    03.     max-height:120px;
    04.     zoom:expression(function(el){
    05.         el.style.zoom = "1";
    06.   
    07.         var resizeImg = function() {
    08.             if (el.width > 120 || el.height > 120) {
    09.                 if (el.width > el.height) {
    10.                     el.width = "120";
    11.                     el.height = el.height * (el.width / 120);
    12.                 } else {
    13.                     el.height = "120";
    14.                     el.width = el.width * (el.height / 120);
    15.                 }
    16.             }
    17.         }
    18.   
    19.         if (el.complete) {
    20.             resizeImg();
    21.         } else {
    22.             el.onload = function() {
    23.                 resizeImg();
    24.             }
    25.         }
    26.     }(this));
    27. }
  6. IE6的:hover

    01. .ie6-hover input:hover, .ie6-hover .h {
    02.     border:1px solid red;
    03. }
    04. .enable-ie6-hover input {
    05.     _zoom:expression(function(el){
    06.         el.style.zoom = "0";
    07.         el.onmouseenter = function() {
    08.             el.className = "h";
    09.         };
    10.         el.onmouseleave = function() {
    11.             el.className = "";
    12.         };
    13.     }(this));
    14. }
  7. IE6下的line-height bug

    bug:

    fixed:

    01. .ie6-line-height-bug { background:#f2f2f2; line-height:50px; zoom:1; }
    02. .ie6-line-height-bug-fixed input {
    03.     _zoom: expression(function(el){
    04.         el.style.zoom = "1";
    05.         var iefixer = document.createElement("b");
    06.         iefixer.style.zoom = 1;
    07.         el.parentNode.insertBefore(iefixer, el);
    08.     }(this));
    09. }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值