THE HAM MEDIA BLOG

jQueryメモ:.css()の取得値で気づいたこと

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CSS
メモ

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)

padding:1em 0;
padding:2em 0;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:1.5em 0;
ダミーテキストダミーテキスト

◆HTMLのタグ中にCSSを設定(サンプルB)

padding:1em 0;
padding:2em 0;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:1.5em 0;
ダミーテキストダミーテキスト

サンプル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)

padding:1em 0;
padding:2em 0;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:1.5em 0;
ダミーテキストダミーテキスト

◆HTMLのタグ中にCSSを設定(サンプルD)

padding:1em 0;
padding:2em 0;
ダミーテキストダミーテキストダミーテキストダミーテキスト
padding:1.5em 0;
ダミーテキストダミーテキスト

ちなみに、SafariとChromeでは、
先ほどとのサンプルとの違いはないです。

FirefoxやIEでみると、サンプルDが先ほどのサンプルBと違って、
em指定がpx指定に変化しているのがわかると思います。

まぁ、ほとんどの場合が外部CSSとかだと思うから、
今回のような例は必要ないと思うけど、
とりあえず覚えておくだけでもいいかもしれない。

それと上の実験でわかったことでもあるのですが、
外部CSSでpaddingなどを指定している場合は
SameHeight Pluginがどのブラウザでも
問題なく高さを揃えることができるようです。
外部CSSを利用していることがほとんどだと思うので、
これもほとんど心配のないことだということがわかりました。

それとは別件で今回の実験で考えたことは、
emで指定されていて、そのままemで取得したい場合、
その場合ってどうしたらいいんだろう?
などと疑問だったりする。
それはまた後々調べようと思う。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。