CSS中expression使用简介(转载)
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">
input {star : expression(οnmοuseοver=this.style.backgroundColor="#FF0000";
οnmοuseοut=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">
可结果却是出现脚本出错,正确的写法应该把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">
转载于:https://www.cnblogs.com/gogoo/archive/2007/05/19/752785.html
CSS中expression使用简介(转载)相关推荐
- CSS中expression怎么用? CSS expression详解
什么是CSS expression? IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义 ...
- 简单粗暴,微生物生态研究中常用数据库简介--转载
微生物生态(MicrobialEcology),又名环境微生物(Environmental Microbiology),是研究微生物之间及其与环境之间相互关系的学科.从生物角度,其研究对象主要有真核微 ...
- CSS中调用JS函数和变量
在CSS来调用JS程序. 这个技术是网络安全里的,叫做CSS跨站. 我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript: ...
- CSS的expression
在网上第一次注意到css里有expression这个属性,于是搜索了一下,得到了一下相关知识 贴出来也许对大家有所帮助,感谢原作者的劳动. CSS中expression使用简介 作者:dozb 定义 ...
- css中margin详细介绍
深入理解css中的margin属性 转载自 http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为 ...
- 转载-CSS中强大的EM
W3CPLUS转载 使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东 ...
- 【Css】css中class之间>(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解(转载,笔记用)
css中">"(大于号)."~"(波浪号)." "(空格).","(逗号)."+"(加号)详解 ...
- css中hideFocus的用法
css中hideFocus的用法 简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
- CSS中的!important属性用法
由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场. 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调. 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型 ...
最新文章
- 现实迷途 第七章 特殊客户
- Thinkphp动态切换主题
- Mysql中大表添加索引的办法
- 【AOP 面向切面编程】Android Studio 使用 AspectJ 监控方法运行 ( 定义连接点注解 | 定义 Aspect 切面 | 定义切入点 | 逐个处理切入点的各个连接点 )
- webapck将css 打包后单独提取到一个css文件中
- 【机器学习】最近邻算法KNN原理、流程框图、代码实现及优缺点
- jQuery学习第一天
- ABAP股票查看代码
- 北大青鸟广州天河中心S1T62班HTML项目答辩实录
- 第二阶段个人冲刺08
- go连接mysql数据库
- CMake笔记2 构建动态链接库
- ZH奶酪:Python中zip函数的使用方法
- java在Intellij上使用sigar
- Apollo感知解析之MinBox障碍物边框构建
- 四足机器人(从PCB到3D打印)
- 联通彻底被iPhone抛弃,失去绯闻女友
- edup无线网卡驱动安装linux,EDUP无线网卡驱动下载-EDUP无线网卡驱动排行榜-比克尔下载...
- JVM_06 运行时数据区3-方法区
- 从我自己的角度总结一下移动互联网的技术
热门文章
- vue 富文本存储_Vue富文本编辑器
- 要了薪资证明了录取的几率大吗_空乘专业的录取分数线是多少?
- 彩色MT9V034摄像头 Bayer转rgb FPGA实现(转载)
- python 使用session_使用session和只使用session有什么区别
- python 进度条_Python小程序系列——动态进度条(1)
- python读书报告_读书笔记 Python编程入门
- 【Zookeeper】windows环境下zookeeper安装
- IT管理人员需要更加了解数据中心冷却情况
- defensive-bash-programming
- Ubuntu 14.04环境变量修改