JavaScriptで、px の要素から em を引きたい

Question

前提・実現したいこと

em指定された値を用いて、指定要素から高さを引きたいです。

自分で書いたコードは以下の通りですが、
いちいちダミー要素を追加したり、それを削除したり、というの流れを不自然に感じます。
これが一般的なのか、もっと良い方法はないのかを知りたいです。
（jQueryでなくJavaScriptです。）

該当のソースコード

emを引きたい対象の要素は#cardで、1.5remで囲まれています。

<div class="outer" style="font-size: 1.5rem">
<div id="card"
  style="width: 200px;
  height: 200px; 
  background: pink;"></div>
</div>

const getNewHeight = function( card, em ){
	
  // 元のサイズを取得
  const cardHeight = card.offsetHeight;
  const cardWidth = card.offsetWidth;
  
  // ダミー要素を生成
  var newDiv = document.createElement('div');
  newDiv.setAttribute('id','dammy'); 
	
  // CSSを設定
  Object.assign(newDiv.style,{             
    height: 'calc('+cardHeight+'px - '+em+'em)', // ex: 'calc(200px - 1.5em)'
    width : cardWidth + 'px',
  });
 
  // ダミー要素を挿入
  document.body.appendChild(newDiv);
  const dammy = document.getElementById('dammy');
  
  // 引かれた高さを取得
  const newHeight = dammy.offsetHeight;
	
  // 削除して結果を返す
  dammy.remove();                
  return newHeight;
} 

const card = document.getElementById('card');
const em = 1.5;
const newHeight = getNewHeight( card, em );
console.log('newHeight=',newHeight);

試したこと

ダミー要素の生成と削除が特に不自然に感じるのですが、それ以外に方法が思いつきません。
強いて挙げれば以下のように書いてみましたが、まぁ…案の定できませんでした。

const getNewHeight = function( card, em ){
  return parseInt( card.offsetHeight+'px' - em+'em' );
} 

const card = document.getElementById('card');
const em = 1.5;
const newHeight = getNewHeight( card, em );
console.log('newHeight=',newHeight);

Comments

[maisumakun]

タイトルがおかしいのではないでしょうか？（かけ合わせたら得られる値は面積です）

[yambejp]

emはフォントサイズに依存しませんか？

[crazyBaseball]

maisumakun様、タイトル訂正致しました。ありがとうございます。

[crazyBaseball]

yambejp様、失礼致しました。HTMLは以下となり、1.5rem に対する em となっています。

<div class="outer" style="font-size: 1.5rem">
<div id="card"
style="width: 200px;
height: 200px;
background: pink;"></div>
</div>

そして #card から、 テキスト１行分となる 1.5em を引きたいので、おっしゃるようにフォントサイズに依存させたいと思っています。

Answer 1

こういうことでしょうか？

const getNewHeight = function( card, em ){
  return parseFloat(getComputedStyle(card).height) - parseFloat(getComputedStyle(card).fontSize) * em;
} 

Comments

[crazyBaseball]

ご回答誠にありがとうございます。助かりました。