CSS Expression用法总结

最新推荐文章于 2021-08-04 09:58:25 发布

原创最新推荐文章于 2021-08-04 09:58:25 发布 · 6.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #function #input #ie #javascript #浏览器

HTML/CSS 专栏收录该内容

12 篇文章

订阅专栏

本文总结了CSSExpression的使用方法，包括解决IE6背景闪烁、为不同类型的input元素赋予样式、实现隔行换色等功能。此外，还介绍了如何利用CSSExpression来模拟:before/:after伪元素及限制图片的最大尺寸。

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 也将不再支持

IE6 的背景闪烁 Bug Fix

1. body {

2.     zoom: expression(function(el){

3.     document.execCommand('BackgroundImageCache', false, true);

4.     el.style.zoom = '1';

5.     }(this));

6. }
给不同 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. }
隔行换色（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. }
模拟 :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. }
模拟图片的：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. }
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. }
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. }