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

joerong888

于 2008-04-09 10:06:49 发布

阅读量87

点赞数

分类专栏： javascript && html && css 文章标签： CSS 浏览器工作

javascript && html && css 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

利用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*/

应用样式的img:

请将鼠标放在a.jpg上看看效果

CSS巧用expression来区分只读文本框

    对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.
    当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.
    这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其它的都由程序自己判断,如下:
<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>