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

.css() は渡されたjQueryオブジェクトの、引数に指定されたCSSプロパティの値を取得する関数です。
前編では、引数として渡された値を評価して、必要に応じて値を整形するところまでを見てきました。
またその過程で、それぞれのブラウザの挙動の差を吸収する クロスブラウザ 処理が施されている事も分かりました。
後編では、実際に要素に適用されている style の値を取得する curCSS() の中身を見ていきます。

jQuery.css() – 後編

前編で触れた floatopacity の例外に当てはまらなかった場合、処理は curCSS() に引き継がれます。

curCSS() は下のようになっています。

やたらと大掛かりな処理に見えますが、それもそのはずで、ブラウザによって curCSS() は異なる2つの関数を使い分けています。
その切り替えの起点となるのが、下の箇所です。

要素に適用されている style を取得するには、 window.getComputedStyle を使用しますが、 InternetExplorer8とそれ以前のバージョンではこのメソッドが実装されていません。
その代わりにIEの独自拡張メソッドである document.documentElement.currentStyle が使用できるので、 window.getComputedStyle をサポートしていないブラウザではこちらが使われます。

また、 window.getComputedStyle をサポートするブラウザでも、 Safari では、このメソッドを windowオブジェクト から使用する事が出来ません。
そのため elem.ownerDocument.defaultView.getComputedStyle() として、各ブラウザごとの差を吸収しています。

さらに、 CSS2.1 をサポートしているブラウザと、 CSS 2.0 までのサポートのブラウザでは、 window.getComputedStyle で取得できる値が違うため、6140行からの処理でこの差を補正しています。

 jQueryは「重い」と言われる事の多いライブラリです。
サポートブラウザを減らす事で処理を軽くした、 zepto.js や、そもそもネイティブのJavaScriptを使う事を推奨している vanilla.js という考え方も注目されています。
しかし、サポートするブラウザが様々な場合(特にIE8以前のブラウザをサポートする必要がある場合)、jQueryのこうした強力なクロスブラウザ性はとても頼もしいですね。

●この記事を書いた人