标签：
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 ];
标签：
原文地址：http://www.cnblogs.com/gongshunkai/p/5932615.html
