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

应用样式的img:

<img src="a.jpg">

请将鼠标放在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>