【JavaScript】要素を拡大、縮小させる方法

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptで要素を拡大させる方法について書こうと思います。

要素を拡大、縮小する

javascriptで、要素を拡大させたり縮小させたりするには、transform の scale を使用することで実現できます。

// x：水平方向の拡大縮小率
// y：垂直方向の拡大縮小率
document.getElementById("id").style.transform = "scale(x, y)";

例えば、以下のようなHTMLがあったとします。

/* 【HTML】 */
<div id="target" style="width: 200px; padding: 20px; margin-bottom: 10px; border: 1px dashed #333333;">
  拡大されます！
</div>

この記述に対してJavaScriptで以下のように記述して実行すると、「拡大されます！」の文字がだんだん大きくなっていきます。

let x = 1;
setInterval("expansionTxt()", 100);
 
function expansionTxt(){
  x = x + 0.1;
  document.getElementById("target").style.transform = "scale(" + x + "," + x + ")";
}

こんな感じで要素を拡大することができます。

また、上記の記述は、以下のように書くこともできます。

let x = 1;
setInterval("expansionTxt()", 100);
 
const expansionTxt = () => {
  x = x + 0.1;
  target.style.transform = "scale(" + x + "," + x + ")";
}

上記を使用すれば、例えばボタンをクリックしたら画像を拡大したり、縮小したりするような処理を書くことができます。

一応、以下にサンプルのコードを載せておきます。
試す機会があれば使ってみて下さい。

idが「up(拡大ボタンのid)」と「down(縮小ボタンのid)」に対して、その要素をクリックしたら拡大したり縮小したりすることができるようになります。

// html
// ※classは省略しています。
<div id="sample" class="">
  <p id="result" class="">要素</p>
  <button id="up" class="">拡大</button>
  <button id="down" class="">縮小</button>
</div>

// JavaScript
  let cnt = 0;

  const upElement = () => {
    cnt--; 
    result.style.transform = "translate(0%," + count + "%)";
  }
 
  const downElement = () => {
    cnt++;
    result.style.transform = "translate(0%," + count + "%)";
  }
 
  window.onload = () => {
    up.onclick = () => { upElement() };
    down.onclick = () => { downElement() };
  }

それでは、また！

Follow me!