[转帖]Mootools源码分析-18 -- Element-5

原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-403396

原作者：我佛山人

 

// Element的styles的setter，setStyles的快捷方式
Element.Properties.styles  =  {set:  function (styles)    {
     this .setStyles(styles);
}};

// Element的透明度控制在浏览器间差异较大，所以单独处理
Element.Properties.opacity  =  {
    set:  function (opacity, novisibility)    {
         // 如果没有指定不控制visibility样式(即仅当novisibility参数为true时不处理)
         if  ( ! novisibility)    {
             // 所以要控制隐藏与显示，可以用this.set('opacity', 1)和this.set('opacity', 0)来控制
             if  (opacity  ==   0 )    {
                 // 透明度为0时直接隐藏
                 if  ( this .style.visibility  !=   ' hidden ' )     this .style.visibility  =   ' hidden ' ;
            }     else     {
                 // 透明度为1时直接显示
                 if  ( this .style.visibility  !=   ' visible ' )     this .style.visibility  =   ' visible ' ;
            }
        }
         // 修正ie hasLayout的bug
         if  ( ! this .currentStyle  ||   ! this .currentStyle.hasLayout)     this .style.zoom  =   1 ;
         // ie的透明度控制用滤镜，注意两种opacity值的区别
         if  (Browser.Engine.trident)     this .style.filter  =  (opacity  ==   1 )  ?   ''  :  ' alpha(opacity= '   +  opacity  *   100   +   ' ) ' ;
         // 非ie直接用opacity样式属性
         this .style.opacity  =  opacity;
         // 存到临时对象，以避免读取时再次进行兼容性判断和操作
         this .store( ' opacity ' , opacity);
    },
     // 直接取临时对象数据，省却兼容性问题
    get:  function ()    {
         return   this .retrieve( ' opacity ' ,  1 );
    }
};

Element.implement({
     // 设置透明度的快捷方式
    setOpacity:  function (value)    {
         return   this .set( ' opacity ' , value,  true );
    },
     // 获取透明度
    getOpacity:  function ()    {
         return   this .get( ' opacity ' );
    },
     // 样式设置
    setStyle:  function (property, value)    {
         // 两个特殊属性
         switch  (property)    {
             case   ' opacity ' :  return   this .set( ' opacity ' , parseFloat(value));
             case   ' float ' : property  =  (Browser.Engine.trident)  ?   ' styleFloat '  :  ' cssFloat ' ;
        }
         /*
        转成骆驼表示，所以其实这里的样式属性同时支持两种写法，如
        setStyle('borderTopWith', 1) 和 setStyle('border-top-with', 1)
         */
        property  =  property.camelCase();
         if  ($type(value)  !=   ' string ' )    {
             var  map  =  (Element.Styles.get(property)  ||   ' @ ' ).split( '   ' );
             // 处理多属性简写时的赋值
            value  =  $splat(value).map( function (val, i)    {
                 if  ( ! map[i])  return   '' ;
                 return  ($type(val)  ==   ' number ' )  ?  map[i].replace( ' @ ' , Math.round(val)) : val;
            }).join( '   ' );
        }     else   if  (value  ==  String(Number(value)))    {
            value  =  Math.round(value);
        }
         this .style[property]  =  value;
         return   this ;
    },

     // 获取样式值
    getStyle:  function (property)    {
         // 还是那两个特殊属性
         switch  (property)    {
             case   ' opacity ' :  return   this .get( ' opacity ' );
             case   ' float ' : property  =  (Browser.Engine.trident)  ?   ' styleFloat '  :  ' cssFloat ' ;
        }
         // 还是支持两种写法
        property  =  property.camelCase();
         var  result  =   this .style[property];
         // 如果取不到值(通常是因为是简写的属性或者属性是在css中指定)
         if  ( ! $chk(result))    {
            result  =  [];
             // 将简写属性还原，逐个取值
             for  ( var  style  in  Element.ShortStyles)    {
                 if  (property  !=  style)     continue ;
                 for  ( var  s  in  Element.ShortStyles[style])    result.push( this .getStyle(s));
                 return  result.join( '   ' );
            }
             // 另一种可能，样式是在