javascriptでemをpxに変換する。

やりたいこと

CSSなどで使用するemをpxの単位に変換します。

コード

以下の関数にemのサイズを渡すとpxのサイズが返ってきます。

第2引数は変換するオブジェクトを表示するエレメントを渡します。

function em2px(em_size, ele) {
  const parentElement = ele.parentElement || document.body;
  const px_size = parseFloat(getComputedStyle(parentElement).fontSize);
  return px_size * em_size;
}

コードの説明

以下の行で基準になるDOMから1emが何pxかを取得しています。

  const px_size = deparseFloat(getComputedStyle(parentElement).fontSize);

取得した値にemのサイズをかけてpx単位でのサイズを取得しリターンしています。

return px_size * em_size;