首页 > 代码库 > jquery的css详解（二）
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 =http://www.mamicode.com/= 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 = http://www.mamicode.com/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 versionhooks = 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 =http://www.mamicode.com/= 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 = http://www.mamicode.com/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 objectreturn style[ name ];
jquery的css详解（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。