找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2021|回复: 0

[分享] Expression 使之支持css的一些属性(2)

[复制链接]
发表于 2013-4-19 10:25:16 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
  2.给元素自定义属性赋值
  例如,消除页面上的链接虚线框。 通常的做法是:
  <a href="link1.htm">link1</a>
  <a href="link2.htm">link2</a>
  <a href="link3.htm">link3</a>
  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?
  采用expression的做法如下:
  <style type="text/css">
  a {star : expression(this.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标签内,而非script内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为
  <style type="text/css">
  input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5";
  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对浏览器资源要求比较高。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-5 02:25 , Processed in 0.041209 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表