>

JQuery中操作Css样式的措施

- 编辑:www.bifa688.com -

JQuery中操作Css样式的措施

JQuery中操作Css样式的方法

jq的工具方法style用于安装样式,jq的实例方法css在安装样式时正是调用的它,接下去剖析一下源码。

css操作都有哪二种???
  1. css
  2. 位置
  3. 尺寸

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 ];
        }
    },

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

});
css操作中的css!!!

代码初叶判定了dom节点类型,不是因秋季点类型的直接return掉

css代码

必发88官网 1

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

必发88官网 2

上面包车型客车代码跟jq的工具方法css同样,就不再解析了,不知道的对象请点击 -> jquery的css详解(一)

jq代码

必发88官网 3

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 ];
代码运营的结果

必发88官网 4


接下来判断value是不是undefined,是的话则得到,否则设置

css操作中的地方!!!
if ( value !== undefined ) {

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

} else {

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

}
必发88官网,css代码

必发88官网 5

大家先看设置中的代码,先得到value的类型

html代码

必发88官网 6

type = typeof value;
jq代码

必发88官网 7

只要type是字符串并且符合正则条件,则通过管理后赋值给value,type修改为number
此间的正则不解释了,风趣味的相爱的人能够协实验商讨究一下,作者说一下这段代码在开拓中的使用处境。
$(selector).css('width',' =100');

代码运行的结果

必发88官网 8


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

对不科学的值重临

css代码

必发88官网 9

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

必发88官网 10

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

jq代码

必发88官网 11

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
}
代码运维的结果

必发88官网 12


本着尺寸的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) {}
}
笑话上台

必发88官网 13
必发88官网 14
必发88官网 15


好了,设置有个别分析完了,获取部分很简短
先针对尺寸的hooks,然后用style对应的个性得到样式值

css本领轻便的来讲正是读取和设置style对象的各样品质,style属性很有用,但最大的阙如正是心有余而力不足通过外部css设置的体裁新闻,然则在jQuery中,那么些都以万分的简约。。。。
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 ];

 

本文由必发88官网发布,转载请注明来源:JQuery中操作Css样式的措施