【javascript】CSSの「scale() 」で拡大縮小した時の要素の高さを求める方法

CSSのscale()関数で拡大縮小した時、次の要素と隙間が空いたり要素が被ることがある。その際に要素の高さをjavascriptを使い良い感じに整える方法の備忘録。

解説「scale()」後の要素の高さの計算方法

まず、「scale()」後の要素の高さは以下の計算で求められる。

要素の高さ * 縮小率 = 縮小後の要素の高さ

例えば、高さが300pxで縮小率が0.5倍だとすると縮小後の要素の高さは150pxであるとわかる。

300px(要素の高さ) * 0.5(縮小率) = 150px(縮小後の要素の高さ)

これを使い、scale()後の要素の高さをjavascriptで取得する。

【解決方法】「scale()」後の高さを計算してjavascriptで反映する

codePenに「scale()」後の高さを取得し高さを調整するコードを用意した。

See the Pen
Untitled by twotone (@twotone-me)
on CodePen.

ソースコード全体としては以下のような構成になっている。

<style>
  .scale-item {
    transform: scale(.3);
    /* 縮小 */
    transform-origin: 0% 0%;
    /* 基点を操作（左上） */
  }
</style>

<div class="scale-item">縮小するよ</div>
<div>「縮小するよ」の次の要素だよ。<br>この上に縮小前の本来の要素分の隙間が空いてしまうよ。<br>それをjavascriptで潰しているよ。（拡大にも対応しているよ）</div>

<script>
  // 値の取得
  var item = document.querySelector(".scale-item");
  // CSSで指定した「transform」の「scale」値の取得
  var matrix = window.getComputedStyle(item).transform;
  // 配列に分割
  var matrixArray = matrix.replace("matrix(", "").split(",");
  // 文字列を数値に変換
  var scale = parseFloat(matrixArray[0]);
  // 縮小した要素の高さを変更
  item.style.height = item.clientHeight * scale + "px";
</script>

これで、「scale()」使用し縮小した時の次の要素間の隙間や、拡大した時に次の要素と被らなくて済むようになる。