jquery的css详解（二）

jq的工具方法style用于设置样式，jq的实例方法css在设置样式时就是调用的它，接下来分析一下源码。

jQuery.extend({

    ............................

    style: function( elem, name, value, extra ) {
        // Don't set styles on text and comment nodes
        if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
            return;
        }

        // Make sure that we're working with the right name
        var ret, type, hooks,
            origName = jQuery.camelCase( name ),
            style = elem.style;

        name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );

        // gets hook for the prefixed version
        // followed by the unprefixed version
        hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];

        // Check if we're setting a value
        if ( value !== undefined ) {
            type = typeof value;

            // convert relative number strings (+= or -=) to relative numbers. #7345
            if ( type === "string" && (ret = rrelNum.exec( value )) ) {
                value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );
                // Fixes bug #9237
                type = "number";
            }

            // Make sure that NaN and null values aren't set. See: #7116
            if ( value == null || type === "number" && isNaN( value ) ) {
                return;
            }

            // If a number was passed in, add 'px' to the (except for certain CSS properties)
            if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
                value += "px";
            }

            // If a hook was provided, use that value, otherwise just set the specified value
            if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
                // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
                // Fixes bug #5509
                try {
                    style[ name ] = value;
                } catch(e) {}
            }

        } else {
            // If a hook was provided get the non-computed value from there
            if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
                return ret;
            }

            // Otherwise just get the value from the style object
            return style[ name ];
        }
    },

    ...........................................

});

代码开始判断了dom节点类型，不是元素节点类型的直接return掉

if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
    return;
}

下面的代码跟jq的工具方法css一样，就不再分析了，不明白的朋友请点击 -> jquery的css详解（一）

var ret, type, hooks,
    origName = jQuery.camelCase( name ),
    style = elem.style;

name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );

// gets hook for the prefixed version
// followed by the unprefixed version
hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];

然后判断value是否undefined，是的话则获取，否则设置

if ( value !== undefined ) {

    .................

} else {

    ................

}

我们先看设置中的代码，先获取value的类型

type = typeof value;

如果type是字符串并且符合正则条件，则经过处理后赋值给value，type修改为number
这里的正则不解释了，有兴趣的朋友可以自己研究一下，我说一下这段代码在开发中的使用场景。
$(selector).css('width','+=100');

if ( type === "string" && (ret = rrelNum.exec( value )) ) {
    value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );
    // Fixes bug #9237
    type = "number";
}

对不正确的值返回

if ( value == null || type === "number" && isNaN( value ) ) {
    return;
}

type是数字并且origName不是cssNumber的属性，则样式值加px

if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
    value += "px";
}

cssNumber: {
    "fillOpacity": true,
    "fontWeight": true,
    "lineHeight": true,
    "opacity": true,
    "orphans": true,
    "widows": true,
    "zIndex": true,
    "zoom": true
}

针对尺寸的hooks

if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
    // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
    // Fixes bug #5509
    try {
        style[ name ] = value;
    } catch(e) {}
}

好了，设置部分分析完了，获取部分很简单
先针对尺寸的hooks，然后用style对应的属性得到样式值

if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
    return ret;
}

// Otherwise just get the value from the style object
return style[ name ];