jQueryメモ：.css()の取得値で気づいたこと
以前紹介したSameHeight Plugin
これの実験をしているうちにふと気づいたことがある。
CSSの指定の仕方によって、.css()で取得してくる値がなんだか違う。
実はそのせいで、サンプルを作ったときは、
SafariとChromeで若干表示が違ったということが判明！
気づいたことをサンプルとメモで残しておく。
styleタグ内かhtmlタグのstyle内かの違い
まずはCSSの指定の違いによる、
jQueryの.css()で取得する値の違いをみてもらいたい。
サンプルは上下どちらも左から
padding:1em 0;、padding:2em 0;、padding:1.5em 0;を指定。
デフォルトのフォントは12pxの設定になっています。
なので1emは12pxとなるなっているはずです。
そしてどのブロックも下記のスクリプトで
padding-topの値を取得してみます。
$('.hoge1').css("paddingTop");
それぞれのブロックに表示されているテキストが
今回のスクリプトで取得された値です。
◆styleタグにCSSを設定（サンプルA）
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
◆HTMLのタグ中にCSSを設定（サンプルB）
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
サンプルAとサンプルB、その違いはCSSの指定の仕方で、
一方のサンプルAは<style>のタグの中に、
もう一方のサンプルBはHTMLのdivタグのstyle=""の中に指定されている、
この二つのサンプルの違いはそこです。
外部CSSやstyleタグの中でCSSを設定しておくと、
em指定しておいたものも、jQueryの.css()で値を取得すると、
その値はpxに変換されて取得されてきます。
"paddingTop"と"padding-top"の違い
もう一つ気づいたのは、.css()で値を取得するとき、
"paddingTop"と"padding-top"での違い。
ちなみにどちらもCSSの値は取得できることには違いないのだが、
ちょっと違いがあるようだったので、下記サンプルで見てもらいたい。
サンプルはすべて先ほどと同じ。
そして以下のサンプルでは、
どのブロックも下記のスクリプトでpadding-topの値を取得してみます。
$('.hoge1').css("padding-top");
さっきは"paddingTop"での取得、今回は"padding-top"での取得。
その違いをご覧ください。
今回もそれぞれのブロックに表示されているテキストが
今回のスクリプトで取得された値です。
◆styleタグにCSSを設定（サンプルC）
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
◆HTMLのタグ中にCSSを設定（サンプルD）
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ちなみに、SafariとChromeでは、
先ほどとのサンプルとの違いはないです。
FirefoxやIEでみると、サンプルDが先ほどのサンプルBと違って、
em指定がpx指定に変化しているのがわかると思います。
まぁ、ほとんどの場合が外部CSSとかだと思うから、
今回のような例は必要ないと思うけど、
とりあえず覚えておくだけでもいいかもしれない。
それと上の実験でわかったことでもあるのですが、
外部CSSでpaddingなどを指定している場合は
SameHeight Pluginがどのブラウザでも
問題なく高さを揃えることができるようです。
外部CSSを利用していることがほとんどだと思うので、
これもほとんど心配のないことだということがわかりました。
それとは別件で今回の実験で考えたことは、
emで指定されていて、そのままemで取得したい場合、
その場合ってどうしたらいいんだろう？
などと疑問だったりする。
それはまた後々調べようと思う。
