[转帖]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( '   ' );
            }
             // 另一种可能，样式是在<style>中指定或者外部css文件指定，这时需要获取运行时的样式值
            result  =   this .getComputedStyle(property);
        }
         if  (result)    {
             // 颜色处理，将RGB表示转成HEX表示
            result  =  String(result);
             var  color  =  result.match( / rgba?\([\d\s,]+\) / );
             if  (color)    result  =  result.replace(color[ 0 ], color[ 0 ].rgbToHex());
        }
         // 在Opera和IE下，获取width和height的处理
         if  (Browser.Engine.presto  ||  (Browser.Engine.trident  &&   ! $chk(parseInt(result))))    {
             // IE和Opera的width不会计算边框厚度，而遵循w3c标准的Fx会
             if  (property.test( / ^(height|width)$ / ))    {
                 var  values  =  (property  ==   ' width ' )  ?  [ ' left ' ,  ' right ' ] : [ ' top ' ,  ' bottom ' ], size  =   0 ;
                values.each( function (value)    {
                    size  +=   this .getStyle( ' border- '   +  value  +   ' -width ' ).toInt()  +   this .getStyle( ' padding- '   +  value).toInt();
                },  this );
                 // 用offsetWidth/offsetHeight减相应方向的边框厚度即为所求
                 return   this [ ' offset '   +  property.capitalize()]  -  size  +   ' px ' ;
            }
             if  (Browser.Engine.presto  &&  String(result).test( ' px ' ))     return  result;
             if  (property.test( / (border(.+)Width|margin|padding) / ))     return   ' 0px ' ;
        }
         return  result;
    },

     // 批量设置样式
    setStyles:  function (styles)    {
         for  ( var  style  in  styles)     this .setStyle(style, styles[style]);
         return   this ;
    },

// 批量获取样式
    getStyles:  function ()    {
         var  result  =  {};
        Array.each(arguments,  function (key)    {
            result[key]  =   this .getStyle(key);
        },  this );
         return  result;
    }
});

// 一些特殊的样式，只是待加工的材料
Element.Styles  =   new  Hash({
    left:  ' @px ' , top:  ' @px ' , bottom:  ' @px ' , right:  ' @px ' ,
    width:  ' @px ' , height:  ' @px ' , maxWidth:  ' @px ' , maxHeight:  ' @px ' , minWidth:  ' @px ' , minHeight:  ' @px ' ,
    backgroundColor:  ' rgb(@, @, @) ' , backgroundPosition:  ' @px @px ' , color:  ' rgb(@, @, @) ' ,
    fontSize:  ' @px ' , letterSpacing:  ' @px ' , lineHeight:  ' @px ' , clip:  ' rect(@px @px @px @px) ' ,
    margin:  ' @px @px @px @px ' , padding:  ' @px @px @px @px ' , border:  ' @px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @) ' ,
    borderWidth:  ' @px @px @px @px ' , borderStyle:  ' @ @ @ @ ' , borderColor:  ' rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) ' ,
    zIndex:  ' @ ' ,  ' zoom ' :  ' @ ' , fontWeight:  ' @ ' , textIndent:  ' @px ' , opacity:  ' @ '
});

// 一些缮写的样式，只是待加工的材料
Element.ShortStyles  =  {margin: {}, padding: {}, border: {}, borderWidth: {}, borderStyle: {}, borderColor: {}};

// 对Element.Styles和Element.ShortStyles的再加工
[ ' Top ' ,  ' Right ' ,  ' Bottom ' ,  ' Left ' ].each( function (direction)    {
     var  Short  =  Element.ShortStyles;
     var  All  =  Element.Styles;
     // 构造marginTop，paddingTop之类的属性
    [ ' margin ' ,  ' padding ' ].each( function (style)    {
         var  sd  =  style  +  direction;
        Short[style][sd]  =  All[sd]  =   ' @px ' ;
    });
     // 构造borderTopWith之类的属性
     var  bd  =   ' border '   +  direction;
    Short.border[bd]  =  All[bd]  =   ' @px @ rgb(@, @, @) ' ;
     var  bdw  =  bd  +   ' Width ' , bds  =  bd  +   ' Style ' , bdc  =  bd  +   ' Color ' ;
    Short[bd]  =  {};
    Short.borderWidth[bdw]  =  Short[bd][bdw]  =  All[bdw]  =   ' @px ' ;
    Short.borderStyle[bds]  =  Short[bd][bds]  =  All[bds]  =   ' @ ' ;
    Short.borderColor[bdc]  =  Short[bd][bdc]  =  All[bdc]  =   ' rgb(@, @, @) ' ;
});

 

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-18.html