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
body {
zoom: expression(function(el){
document.execCommand(
'BackgroundImageCache'
, false, true);
el.style.zoom =
'1'
;
}(this));
}
- 给不同 type 的 input 赋予不同的样式
input {
zoom: expression(function(el){
el.style.zoom =
"1"
;
el.className ? el.className+=
" "
+el.type : el.className=el.type;
}(this));
}
- 隔行换色(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));
}
- 模拟 :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));
}
- 模拟图片的:max-width 和 max-height (或 min-width 和 min-height)
.max-width span img {
max-width
:
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));
}
- 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));
}
- 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));
}
转载于:https://www.cnblogs.com/kevinhigher/archive/2011/11/16/2251771.html
CSS Expression用法总结相关推荐
- CSS中expression怎么用? CSS expression详解
什么是CSS expression? IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义 ...
- css expressionr,CSS Expression讲解
CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性. 关于CSS Expression你可以参考的另外两篇文章: CSS中expression怎么 ...
- css expression
概述 使用 优点 缺陷 实际应用 总结 概述 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式( ...
- CSS: SASS用法指南 (附视频)
观看视频: CSS: SASS用法指南 学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,C ...
- CSS animation-play-state用法
CSS animation-play-state用法 animation-play-state属性用于指定动画是运行还是暂停. 用法: **animation-play-state:paused|ru ...
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
- html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法,有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法 有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
- css()用法,jQuery的css()方法用法实例
本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值.以样式属性名称作为 ...
- 网页重构应该避免的10大 CSS 糟糕用法
原文地址罗磊的独立博客:「网页重构应该避免的10大 CSS 糟糕用法」 对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越 ...
最新文章
- c语言windows程序设计 - 第十天,C语言Windows程序设计 - 第十天 - 响应键盘事件...
- python中类似对象吗_在Python中,两个对象什么时候相同? - python
- 【NOI1995】石子合并
- Codeforces Round #630 (Div. 2) F. Independent Set 树形dp
- Linux 文件的压缩与解压
- python dd 合并二进制文件_马克的Python学习笔记#数据编码与处理 5
- C++原型模式和模板模式
- Codeforces Round #275 (Div. 2)
- linux下实用小脚本,linux下shell常用脚本大集合啦
- chrome书签搜索
- 宋红康版JVM笔记 ppt
- html字体加粗怎么设置,css怎么设置字体加粗?
- 《了不起的我》 自我发展的心理学 -- 陈海贤 读后感
- 再忆年少,再见年少——青春路上的我们
- export PATHONPATH的用法
- python自动点赞微信_基于AirTest+Python的ios自动化测试demo(微信朋友圈无限点赞)
- 【C数据结构】单链表的实现以及链表和顺序表的优缺点
- 混迹在腾讯微博的知名站长名单(截至4月28日)
- 数字图像处理 什么是霍夫变换?
- moon服务器 zerotier_使用ZeroTier组建虚拟内网/如何搭建MOON转发服务器