expression将JS、Css结合起来


IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

  给元素固有属性赋值

  例如,你可以依照浏览器的大小来安置一个元素的位置。

#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" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>

  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?

  采用expression的做法如下:

<style type="text/css">
a {star : expression(onfocus=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标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

<style type="text/css">
input
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

  可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

  注意

  不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。

实例:利用css里expression来实现界面对象的批量控制

问题说明: 用过CSS样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?


解决方法: 使用css的expression方法,
具体实现要看看.css的写法:

/*替换图片CSS*/
#imgScript { /*这里使用对象ID来通配样式, 也可以定义一个css函数*/
star:expression(
onmouseover = function()
{
/*替换图片*/
if(this.hover != null){
this.name = this.src;
this.src = this.src.replace(''.jpg'', ''_over.jpg'');
this.HasChg = 1;
}
},
onmouseout = function()
{
/*还原本来的图片*/
if(this.HasChg != null){
this.src = this.name;
this.HasChg = null;
}
}
)

}/*end imgScript*/



相关阅读:
系统技巧提醒:7个被Windows 7忽略的蛮实用的功能
SQL 多表连接查询实现语句
系统无法删除文件的解决方法
JavaScript中的Array对象使用说明
chrome原生方法之数组
IE地址栏实现的JS有趣效果和应用
javascript的函数
CSS教程:新的图像替换方法
CSS代码缩写技巧
触发gridview的行选择事件
sql 服务器知识
The file /boot/grub/stage1 not read cor 解决办法
php下MYSQL limit的优化
如何在linux下输出当前时间
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 《世间最美的坟墓》课件3.rar(680)k(会员上传) 我真开心作文300字 活泼可爱的我作文400字 网络诗词創作选编续作(十三) 医院财务科工作总结与工作计划 大一学生开学自我介绍范文 《颜氏家训》读书笔记 我的亲子运动会作文300字 绿豆芽作文380字 地球只有一个作文100字 小学五年级作文500字:电冰箱 雨天,适合想念 墓畔哀歌 2015毕业生毕业登记表自我鉴定范文 14年搞笑祝福语汇集 除夕搞笑的祝福语 8月8日寞晓灏 国庆节周记300字 中国与中亚石油贸易合作发展策略研究 如果你是学生,你有勇气看完吗?°文/韩子轩 湖北十堰80后青年彭伟的感人孝心故事 我爱中国450字 有趣的面试逻辑题 2016简短辞职报告范文 公司2006年技术质量工作总结 末日作文1000字 摆正希望的天平作文1200字 2014届人教版一轮题库:语言表达和运用(简明、准确、鲜明、生动) 街道社区党建试点联手共建工作经验材料 讨厌冬天作文450字 侯以雷诗歌欣赏1992 我们90后总有让你们骄傲的一天作文800字 守望生命中最后的爱情 军乐演奏:《前进在新长征的路上》串词: 苏轼的哲理诗 小学四年级作文350字:给小姨的一封信 2009年度秋季学期信息技术教研工作总结 游玩白塘公园250字 爸爸、妈妈,我想对您说800字 肥西,我的家100字 戒指 下雪了100字【精选】 2015年度xx优秀大学生入党申请书 林业局十二五工作总结及十三五规划 远方的叮咛 Unit 9 Can you come to my party?Period 1 Section A 1a -1c导学案 酸甜苦辣作文600字 小学四年级作文400字:被补习班“吞噬”的人 生产技术管理制度 自治州人大常委会工作报告

Copyright © 2016 phpStudy |