zoukankan      html  css  js  c++  java
  • 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
      body {
      	zoom: expression(function(el){
      	document.execCommand('BackgroundImageCache', false, true);
      	el.style.zoom = '1';
      	}(this));
      }
      
    2. 给不同 type 的 input 赋予不同的样式
      input {
      	zoom: expression(function(el){
      		el.style.zoom = "1";
      		el.className ? el.className+=" "+el.type : el.className=el.type;
      	}(this));
      }
      
    3. 隔行换色(zebra lists)
      .test {
      	unicode-bidi: expression(function(el){
      		el.style.unicodeBidi = "normal";
      		var childs = el.getElementsByTagName("li");
      		for(var i=0; i<childs.length; i++){
      			(i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
      		}
      	}(this));
      }
      
    4. 模拟 :before 或者 :after
      .test {
      	letter-spacing: expression(function(el){
      		el.style.letterSpacing = "0";
      		var newchild = document.createElement("span");
      		newchild.className="after";
      		newchild.appendChild(document.createTextNode(" World!"));
      		el.appendChild(newchild);
      	}(this));
      }
      
    5. 模拟图片的:max-width 和 max-height (或 min-width 和 min-height)

      .max-width span img {
      	max-120px;
      	max-height:120px;
      	zoom:expression(function(el){
      		el.style.zoom = "1";
       
      		var resizeImg = function() {
      			if (el.width > 120 || el.height > 120) {
      				if (el.width > el.height) {
      					el.width = "120";
      					el.height = el.height * (el.width / 120);
      				} else {
      					el.height = "120";
      					el.width = el.width * (el.height / 120);
      				}
      			}
      		}
       
      		if (el.complete) {
      			resizeImg();
      		} else {
      			el.onload = function() {
      				resizeImg();
      			}
      		}
      	}(this));
      }
      
    6. IE6的:hover

      .ie6-hover input:hover, .ie6-hover .h {
      	border:1px solid red;
      }
      .enable-ie6-hover input {
      	_zoom:expression(function(el){
      		el.style.zoom = "0";
      		el.onmouseenter = function() {
      			el.className = "h";
      		};
      		el.onmouseleave = function() {
      			el.className = "";
      		};
      	}(this));
      }
      
    7. IE6下的line-height bug

      bug:

      fixed:

      .ie6-line-height-bug { background:#f2f2f2; line-height:50px; zoom:1; }
      .ie6-line-height-bug-fixed input {
      	_zoom: expression(function(el){
      		el.style.zoom = "1";
      		var iefixer = document.createElement("b");
      		iefixer.style.zoom = 1;
      		el.parentNode.insertBefore(iefixer, el);
      	}(this));
      }
      
  • 相关阅读:
    elasticsearch(0.90.10)安装配置+超多插件!!
    【架构】基于Nutch+Hadoop+Hbase+ElasticSearch的网络爬虫及搜索引擎
    Elasticsearch(1.1.1)基础教程pdf
    hadoop1.2.1+hbase0.94.11+nutch2.2.1+elasticsearch0.90.5安装配置攻略
    安装和使用 Elasticsearch(1.1.1)+marvel插件、Kibana插件
    nutch2.1+mysql+elasticsearch整合linux单机部署
    Nutch 快速入门(Nutch 2.2.1+Hbase+Solr)
    Linux中VMware虚拟机增加磁盘空间的扩容操作
    java8使用stream的collect进行list转map注意事项
    Java 8 指南
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1534330.html
Copyright © 2011-2022 走看看