CSS的expression
在网上第一次注意到css里有expression这个属性，于是搜索了一下，得到了一下相关知识
贴出来也许对大家有所帮助，感谢原作者的劳动。
CSS中expression使用简介
作者：dozb
定义
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
给元素固有属性赋值
例如，你可以依照浏览器的大小来安置一个元素的位置。
#myDiv {position: absolute;width: 100px;height: 100px;left: expression(document.body.offsetWidth - 110 + "px");top: expression(document.body.offsetHeight - 110 + "px");background: red;
}
|
给元素自定义属性赋值
例如，消除页面上的链接虚线框。
通常的做法是：
|
<a href="link1.htm" οnfοcus="this.blur()">link1</a> <a href="link2.htm" οnfοcus="this.blur()">link2</a> <a href="link3.htm" οnfοcus="this.blur()">link3</a> |
粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？
采用expression的做法如下：
|
<style type="text/css"> a {star : expression(οnfοcus=this.blur)} </style> <a href="link1.htm">link1</a> <a href="link2.htm">link2</a> <a href="link3.htm">link3</a> |
说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为
| <style type="text/css"> input {star : expression(οnmοuseοver=this.style.backgroundColor="#FF0000"; οnmοuseοut=this.style.backgroundColor="#FFFFFF")} </style> <style type="text/css"><br> input {star : expression(οnmοuseοver=this.style.backgroundColor="#FF0000";<br> οnmοuseοut=this.style.backgroundColor="#FFFFFF")}<br> </style><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> |
可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：
|
<style type="text/css"> input {star : expression(οnmοuseοver=function() {this.style.backgroundColor="#FF0000"}, οnmοuseοut=function(){this.style.backgroundColor="#FFFFFF"}) } </style> <input type="text"> <input type="text"> <input type="text"> |
注意
不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。
CSS的expression相关推荐
- 织梦 css里的图片标签,织梦{dede:field.body /}中用CSS的expression参数控制图片大小
{dede:field.body /} css:图片高和宽最大都是600px. .content img{ max-width:600px; max-height:600px; width:600px ...
- [css] 你有用过IE css的expression表达式吗？说说你对它的理解和它有什么作用呢？
[css] 你有用过IE css的expression表达式吗?说说你对它的理解和它有什么作用呢? 主要用来解决IE 低版本样式自适应的问题. 比如:height:expression(this.of ...
- CSS中expression使用简介(转载)
定义 IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以 ...
- CSS之expression
IE5及其后续的版本支持css中的expression,expression 可以在css中调用Javascript 表达式. 最简单的应用,例如在设置高度为整个页面的高度: 例一 . mainDiv ...
- CSS中expression怎么用？ CSS expression详解
什么是CSS expression? IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义 ...
- css expressionr,CSS Expression讲解
CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性. 关于CSS Expression你可以参考的另外两篇文章: CSS中expression怎么 ...
- html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...
- CSS分别设置Input样式（按input类型）
当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10 ...
- 实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
最新文章
- 线刷一加5t android 9,一加5/5T 氢OS 9.0稳定四版 侧边工具 通知特效 Magisk 极速流畅 简约实用-刷机之家...
- 计算机网络基础（路由原理）
- Python入门100题 | 第073题
- Web前端学习技巧有哪些？本文给你答案
- 从“等等”到“秒开”再到“直开”，是什么让闲鱼社区相见恨晚？
- 什么是saashrm
- 《信息存储与管理（第二版）：数字信息的存储、管理和保护》—— 2.12 闪存盘简介...
- 插图 引用 同一行两个插图_提出食物主题中的插图
- 20165232 缓冲区溢出漏洞实验
- 开源前端 可视化大数据交互前端动态模板
- 一次面试留下的实际应用问题。关于HttpModule，IIS集成模式。
- 系统类配置(四)【ubuntu14.04中安装英伟达驱动解决分辨率低的问题】
- 概率论：集合、假设检验、分布、矩阵、估计
- 佳能Canon PIXMA G1010 打印机驱动
- 上班工作压力太大?来玩个游戏解压下
- 《数学之美与浪潮之巅》读后感
- 猴子选大王[加强版]
- 嵌入式开发＜串口调试工具＞
- 野人与传教士——宽度优先搜索（完整报告，含全部代码）
- 冬日舞会服务器维护中,冬日舞会