webrebuild.org第四届年会——金秋四城联动

邀您参加“裸奔”

在你对CSS华丽的效果着迷时,别忘了在华丽外表下面,最原始的文字。

邀您参与每年4月9号的“CSS裸奔节”,详情请登陆webrebuild.org

使用css的expression方法的例子

Ghost 发表于 [2005-10-19 18:32]

使用CSS里的expression方法,可以在CSS中写JS脚本,例子如下:
-----------------------------1----------------------------
<style type="text/css">

#t {   /*这里使用对象ID来通配样式, 也可以定义一个css函数*/
  star:expression (
    onmouseover = function(){
        this.style.backgroundColor="#000";
        this.style.color="#fff";
    },
    onmouseout = function(){
        this.style.backgroundColor="#fff";
        this.style.color="red";
    }
  )
}
</style>


<input id="t" type="submit" name="Submit" value="提交">
---------------------------------------------------------

改变只读文本框的背景颜色:

--------------------------2-------------------------------
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#f0f0f0":"")}
</style>
<input type="text" name="">
<input type="text" name="" readonly>
<input type="text" name="">
<input type="text" name="" readonly>
---------------------------------------------------------

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

--------------------------3-------------------------------
  /*替换图片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*/

应用样式的img:
<img src="a.jpg">
---------------------------------------------------------

文章地址:http://www.cssforest.org/blog/index.php?id=87

使用css的expression方法的例子》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.

文章被分类到:CSS


评论也精彩

  1. 周裕波 在 531 日 之前 说:

    为了不隐藏页面性能,不建议在css中使用expression

  2. Gallen 在 458 日 之前 说:

    IE8已经决定不在支持expression
    也就是说不久的将来,它会被放入垃圾站

欢迎发表评论
  1. 请不要发表跟文章无关的评论,内容或站点如指向非个人博客地址的以发广告对待!
  2. 为抵制垃圾评论,留言需要先预览再点击提交。
  3. 评论支持textile语法,查看 textile帮助
  4. 还可以使用QQWeb输入法