jQuery-1.9.1源码分析系列（九） CSS操作

jQuery.fn.css: function( name, value ) {
    //access将当前jQuery对象分解成单一元素逐个调用第二个参数中的回调function( elem, name, value )，
    //如果参数name是对象的话，access内部分解name递归调用逐个处理name的每一个key/value键值对
    return jQuery.access( this, function( elem, name, value ) {
        var len, styles,
        map = {},
        i = 0;
        //如果css特征名称是一个数组，比如[‘left‘,‘marginRight‘]
        if ( jQuery.isArray( name ) ) {
            styles = getStyles( elem );
            len = name.length;
            //通过$.css()获取对应的css特征值
            for ( ; i < len; i++ ) {
                map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
            }

            return map;
        }

        //value有值则调用$.style设置单个css值，value参数无值则通过$.css()获取对应的css特征值
        return value !== undefined ?
        jQuery.style( elem, name, value ) :
        jQuery.css( elem, name );
    }, name, value, arguments.length > 1 );
}

//给DOM节点设置或获取样式特征值
jQuery.style: function( elem, name, value, extra ) {
    //文本和注释节点不能设置样式特征值
    if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
        return;
    }

    //修正css特征名称以适配当前浏览器
    var ret, type, hooks,
        origName = jQuery.camelCase( name ),
        style = elem.style;
    //jQuery.cssProps缓存查询过的css特征名称供后续便捷查找使用
    name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );

    //获取有前缀版本的hooks或没有前缀版本的hooks
    hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];

    //如果是给css特征名称设置值
    if ( value !== undefined ) {
        type = typeof value;

        // convert relative number strings (+= or -=) to relative numbers. #7345
        //rrelNum = new RegExp( "^([+-])=(" + core_pnum + ")", "i" )
        //转换相对数字符串+=/-=为相应的数字
        if ( type === "string" && (ret = rrelNum.exec( value )) ) {
            //(+ + 1) == 1;(- + 1) == -1
            value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );
            // Fixes bug #9237
            type = "number";
        }

        //NaN和null不可用
        if ( value == null || type === "number" && isNaN( value ) ) {
            return;
        }

        //除开不可设置为像素单位的css特征，其他的都添加上“px”
        if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
            value += "px";
        }

        //support.clearCloneStyle = div.style.backgroundClip === "content-box";
        //div.style.backgroundClip为非“content-box”模式且
        //设置的值为空的background...将其设置为继承父节点样式
        // Fixes #8908, 更准确的做法是对每一个问题特征都设置默认值，但是这至少会调用8次函数
        if ( !jQuery.support.clearCloneStyle && value === "" && name.indexOf("background") === 0 ) {
            style[ name ] = "inherit";
        }

        //如果提供了hook则使用hook设置值，否则设置置顶的值
        if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {

            //当要设置的值为无效值的时候ie会抛出异常
            // Fixes bug #5509
            try {
                style[ name ] = value;
            } catch(e) {}
        }
    //获取值
    } else {
        //如果提供了hook则使用hook取值
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
            return ret;
        }

        // 其他情况从style对象中取值
        return style[ name ];
    }
}


//返回一个css特征名称，该名称可能是供应商添加了前缀的特征名
function vendorPropName( style, name ) {
    //短名称未添加厂商前缀
    if ( name in style ) {return name; }

    //检查供应商的前缀名
    //cssPrefixes = [ "Webkit", "O", "Moz", "ms" ]
    var capName = name.charAt(0).toUpperCase() + name.slice(1),
        origName = name,
        i = cssPrefixes.length;

    while ( i-- ) {
        name = cssPrefixes[ i ] + capName;
        if ( name in style ) {return name; }
    }

    return origName;
}

//获取name对应的css特征值
css: function( elem, name, extra, styles ) {
    var num, val, hooks,
    origName = jQuery.camelCase( name );

    //修正名称
    name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );

    //获取有前缀版本的hooks或没有前缀版本的hooks
    hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];

    //从hook中提取值
    if ( hooks && "get" in hooks ) {
        val = hooks.get( elem, true, extra );
    }

    //其他情况使用curCSS取值
    if ( val === undefined ) {
        val = curCSS( elem, name, styles );
    }

    //cssNormalTransform = {letterSpacing: 0,fontWeight: 400}
    //将"normal"转化成计算值
    if ( val === "normal" && name in cssNormalTransform ) {
        val = cssNormalTransform[ name ];
    }

    //当强制或提供了限定和val看上去像数字时强制转化成数字并返回
    if ( extra === "" || extra ) {
        num = parseFloat( val );
        return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;
    }
    return val;
}