jQuery.css() – 前編
.css()は渡されたjQueryオブジェクトの、引数に指定されたCSSプロパティの値を取得する関数です。
例えば次のようなHTML,CSSがあったとします。
|
1 |
<p id="text">テキストテキストテキスト</p> |
|
1 2 3 4 |
#text{ color: red; font-weight: bold; } |
これに対して .css() を使うと次のような結果が得られます。
|
1 |
console.log($('#text').css('color')); // => rgb(255, 0, 0) |
また、CSSプロパティを配列形式で渡すことで、複数の値を取得することもできます。
|
1 2 |
console.log($('#text').css(['color', 'font-weight'])); // => {color: "rgb(255, 0, 0)", font-weight: "bold"} |
ここで気をつけなければ、.css()で取得できる値は、 CSSに記述したものと同じではない という点です。
CSSに color: red; と指定した文字色は、 rgb(255, 0, 0) として返されます。
また、 font-weight: bold; については、Chromeでは bold ですが、FireFoxは 700 と、数値指定時の同等数で返されます。
つまり、 .css() はブラウザごとの実装に大きく左右されるということです。
ここからはjQueryのソースコードを見ていきます。.css() を使用すると、まず以下の処理に入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*===== jquery-1.11.1.js-L6848 =====*/ css: function( name, value ) { return access( this, function( elem, name, value ) { var styles, len, map = {}, i = 0; if ( jQuery.isArray( name ) ) { styles = getStyles( elem ); len = name.length; for ( ; i < len; i++ ) { map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles ); } return map; } return value !== undefined ? jQuery.style( elem, name, value ) : jQuery.css( elem, name ); }, name, value, arguments.length > 1 ); }, |
ここでは引数を評価して、その後の処理を分岐させています。
まず name （CSSプロパティ名）が配列であるかどうかを評価し、配列であった場合、それぞれのプロパティ名ごとに再度 .css() が呼び直されます。
次の、
|
1 2 3 4 |
/*===== jquery-1.11.1.js-L6865 =====*/ return value !== undefined ? jQuery.style( elem, name, value ) : jQuery.css( elem, name ); |
の箇所では、第2引数が指定されているかどうかを評価し、何も指定しない場合 jQuery.css() という関数に処理が引き継がれます。
jQuery.css() は下のようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*===== jquery-1.11.1.js-L6700 =====*/ css: function( elem, name, extra, styles ) { var num, val, hooks, origName = jQuery.camelCase( name ); // Make sure that we're working with the right name name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) ); // gets hook for the prefixed version // followed by the unprefixed version hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ]; // If a hook was provided get the computed value from there if ( hooks && "get" in hooks ) { val = hooks.get( elem, true, extra ); } // Otherwise, if a way to get the computed value exists, use that if ( val === undefined ) { val = curCSS( elem, name, styles ); } //convert "normal" to computed value if ( val === "normal" && name in cssNormalTransform ) { val = cssNormalTransform[ name ]; } // Return, converting to number if forced or a qualifier was provided and val looks numeric if ( extra === "" || extra ) { num = parseFloat( val ); return extra === true || jQuery.isNumeric( num ) ? num || 0 : val; } return val; } |
ここではまず最初に、渡されたCSSプロパティ名を jQuery.camelCase() を使ってキャメル記法に直しています。
この jQuery.camelCase() 関数は、もちろん外からでも使用することができます。
|
1 |
console.log($.camelCase('hoge-fuga')); // => hogeFuga |
その後は基本的には curCSS() という関数に処理を引き継ぐという処理内容ですが、いくつか例外があります。
まず一つ目の例外は float プロパティです。float にJavaScriptからアクセスする場合 elemnt.style.cssFloat というプロパティにアクセスしますが、 InternetExplorer8 とそれ以前のバージョンでは elemnt.style.styleFloat というプロパティになります。
そのため、下の処理でこの差を吸収しています。
|
1 2 3 |
/*===== jquery-1.11.1.js-L6704 =====*/ // Make sure that we're working with the right name name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) ); |
|
1 2 3 4 5 6 7 |
/*===== jquery-1.11.1.js-L6627 =====*/ // Add in properties whose names you wish to fix before // setting or getting the value cssProps: { // normalize float css property "float": support.cssFloat ? "cssFloat" : "styleFloat" }, |
また同様に、下の箇所では opacity の値を取得した際の動作を統一しています。
|
1 2 3 4 5 6 7 8 9 |
/*===== jquery-1.11.1.js-L6707 =====*/ // gets hook for the prefixed version // followed by the unprefixed version hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ]; // If a hook was provided get the computed value from there if ( hooks && "get" in hooks ) { val = hooks.get( elem, true, extra ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*===== jquery-1.11.1.js-L6597 =====*/ // Add in style property hooks for overriding the default // behavior of getting and setting a style property cssHooks: { opacity: { get: function( elem, computed ) { if ( computed ) { // We should always get a number back from opacity var ret = curCSS( elem, "opacity" ); return ret === "" ? "1" : ret; } } } }, |
上のような例外処理で精緻化された引数は、ようやく curCSS() に渡され、CSSの値が返されます。
かなり長くなってきたので、この続きは後編で。。