ここから本文です

javascriptもしくはjqueryで1emが16pxだとして、1em+16px=32みたいな計算ってどう...

kom********さん

2013/9/901:59:40

javascriptもしくはjqueryで1emが16pxだとして、1em+16px=32みたいな計算ってどうやるんですか?

var a = 1em+16px=32; //こんなノリ
$('#何か').css({
'top': a + 'px'
});
こんな感じで使いたいです。

閲覧数:
403
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

k_r********さん

2013/9/908:15:39

1em が 16px でしたら、もちろん先に回答している方の方法でも行けますが…
1em が可変なのでしたら、以下のような方法があります。

[1] 実際に 1em の要素を生成して、その px数を取得する。
- - - - -
var div1em = $("<div></div>").css({height:"1em"}).appendTo("#何か" /* 取得したいemのセレクタにする */ );
var pxOf1em = div1em.height();
div1em.remove();
var a = pxOf1em * 1 + 16; // 1em + 16px
$('#何か').css({
'top': a + 'px'
});
- - - - -
1行目で高さ1em の要素を生成し、2行目でその要素の高さを pxOf1em に代入し、3行目で要素を削除しています。
この一連の流れで、1em が 何px かを取得できます。
これを用いて、a に 1em + 16px の px数 を代入しています。




[2] CSS3 の calc() を使う
- - - - -
$('#何か').css({
'top': 'calc(1em + 16px)'
});
- - - - -
CSS3 から、CSS で calc() による別単位同士の計算が可能になっています。
https://developer.mozilla.org/ja/docs/Web/CSS/calc
これは jQuery の機能ではなく、CSS の機能ですので、普通に CSS に書いても利用できます。
- - - - -
#何か { top: calc(1em + 16px); }
- - - - -

注意点ですが…
(a) 演算子(+ - * /) の両側は半角スペースを入れる必要がある
(b) 使えないブラウザや、ベンダープレフィックスが必要なブラウザが多い

特に (b) についてですが、Safari, Opera, IE ではまだまだ calc() が使えないバージョンのシェアが高いです。
その意味では、[1] の方法を使うのがいいかもしれません。
参考:http://caniuse.com/calc


ご参考になれば幸いです。

質問した人からのコメント

2013/9/9 20:44:31

降参 ありがとうございます。検索しても見つからなかったので本当に助かりました。詳しい説明も本当に分り易くて素晴らしいです。

ベストアンサー以外の回答

1〜1件/1件中

fuj********さん

2013/9/902:15:07

function em2px(a){return a*16}
(em2px(1)+16)+"px"

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる