【不定期連載】読解 jQuery Vol.3

jQuery.css() – 前編

.css()は渡されたjQueryオブジェクトの、引数に指定されたCSSプロパティの値を取得する関数です。
例えば次のようなHTML,CSSがあったとします。

これに対して .css() を使うと次のような結果が得られます。

 また、CSSプロパティを配列形式で渡すことで、複数の値を取得することもできます。

ここで気をつけなければ、.css()で取得できる値は、 CSSに記述したものと同じではない という点です。
CSSに color: red; と指定した文字色は、 rgb(255, 0, 0) として返されます。
また、 font-weight: bold; については、Chromeでは bold ですが、FireFoxは 700 と、数値指定時の同等数で返されます。
つまり、 .css() はブラウザごとの実装に大きく左右されるということです。

ここからはjQueryのソースコードを見ていきます。
.css() を使用すると、まず以下の処理に入ります。

ここでは引数を評価して、その後の処理を分岐させています。
まず name (CSSプロパティ名)が配列であるかどうかを評価し、配列であった場合、それぞれのプロパティ名ごとに再度 .css() が呼び直されます。

次の、

の箇所では、第2引数が指定されているかどうかを評価し、何も指定しない場合 jQuery.css() という関数に処理が引き継がれます。

jQuery.css() は下のようになっています。

ここではまず最初に、渡されたCSSプロパティ名を jQuery.camelCase() を使ってキャメル記法に直しています。
この jQuery.camelCase() 関数は、もちろん外からでも使用することができます。

その後は基本的には curCSS() という関数に処理を引き継ぐという処理内容ですが、いくつか例外があります。

まず一つ目の例外は float プロパティです。
float にJavaScriptからアクセスする場合 elemnt.style.cssFloat というプロパティにアクセスしますが、 InternetExplorer8 とそれ以前のバージョンでは elemnt.style.styleFloat というプロパティになります。
そのため、下の処理でこの差を吸収しています。

また同様に、下の箇所では opacity の値を取得した際の動作を統一しています。

上のような例外処理で精緻化された引数は、ようやく curCSS() に渡され、CSSの値が返されます。

かなり長くなってきたので、この続きは後編で。。

 

●この記事を書いた人