CSSの操作によるstyleの変更、アニメーション JavaScript初学者講座

JavaScriptで操作できるのはHTMLだけでなく、CSSのプロパティや値を操作することも可能です。値を動的に変更することで、アニメーションのような動きのある演出をページに盛り込むことができます。
アニメーションはCSSでもできる部分は多いのですが、よりディティールを詰めようとするとJavaScriptの方が勝る部分も多かったり、優秀なライブラリが準備されていたりしますので、まずはこちらで基礎を勉強していきましょう。

要素にスタイルを付与する
アニメーションを動作させる
終わりに

要素にスタイルを付与する

CSSの操作はstyleプロパティを使って要素に対して、CSSのプロパティに値を付与していきます。使い方は下記のようになります。

要素.style.CSSのプロパティ名 = "CSSの値"

次にサンプルを見ていきましょう。下記のコードはボタンをクリックをするとbody要素の背景色を灰色に切り替えるプログラムです。CSSのプロパティ名ですが、CSSで記述する際は「background-color」のようにハイフンつなぎで記述するものを、JavaScriptで操作する場合は「backgroundColor」のようにキャメルケースで記載します。

<button class="changeBackground">背景色の変更</button>

<script>
  const body = document.querySelector("body");
  const button = document.querySelector(".changeBackground");

  button.addEventListener("click", () => {
    body.style.backgroundColor = "#ccc";
  }); 
</script>

コードの実行サンプル

こちらはCSSプロパティの値を書き換える単純なものでしたが、次はfontSizeのように数値を扱いましょう。
下記のプログラムではボタンを押すたびにfontSizeが1pxずつ大小できるボタンを実装しています。

<p class="text" style="font-size: 20px;">下のボタンをクリックするとフォントサイズを変更できます。</p>
<button class="sizeUp" data-fontsize="1">フォントを大きくする</button>
<button class="sizeDown" data-fontsize="-1">フォントを小さくする</button>

<script>
  const $text = document.querySelector(".text");
  const $sizeUpButton = document.querySelector(".sizeUp");
  const $sizeDownButton = document.querySelector(".sizeDown");

  const fontSizeChange = (num, $element) => {
    num = Number(num);
    // data属性の数字を現在のフォントサイズに足す。
    const fontSize = (Number($element.style.fontSize.replace('px', '')) + num) + "px";
    $element.style.fontSize = fontSize;
  }

  $sizeUpButton.addEventListener("click", () => {
    fontSizeChange($sizeUpButton.dataset.fontsize, $text)
  })

  $sizeDownButton.addEventListener("click", () => {
    fontSizeChange($sizeDownButton.dataset.fontsize, $text)
  })

コードの実行サンプル

ボタンのデータ属性に１クリックで増減する値を保持し、fontSizeChange関数に引数として渡しています。
引数をそのまま受け取ると文字列として扱われてしまったため、Numberを用いてデータ型の変更を行なっています。.fontSizeプロパティの戻り値は「px」が含まれているので、replaceメソッドを使って「px」を削除したあとに数値型に変更しています。再度にもう一度「px」を付与してfontSize変数に代入したものを該当要素のフォントサイズに指定しています。

アニメーションを動作させる

ここまでに書いてきたコードは入力に対しての動作なのでインタラクションになっていますが、次は要素を動かすアニメーションを作ります。次のコードはdiv要素のleftの値をsetIntervalメソッドを使って、繰り返し値を足していくことで動きを実現しています。

<button class="button">動かす</button>
<div class="box"></div>

<script>
  const $box01 = document.querySelector(".box");
  const $button = document.querySelector(".button");
  
  $button.addEventListener("click", () => {
    let counter = 0;
    const id = setInterval(function(e) {
      ++counter
      $box01.style.left = counter + "px";
      if (counter > 300) {
        clearInterval(id)
      }
    }, 5); // 繰り返しの時間をミリ秒で指定
  });
</script>

コードの実行サンプル

setInterValは指定した時間で処理を繰り返すメソッドです。上記のコードでは5ミリ秒に1度counter変数にインクリメントをして、1ずつpx数をずらしていることになります。
clearIntervalはsetInterValの処理を止めるためのメソッドです。これがないとsetInterValは永遠に処理を続けることになりますので、止めたい場合にはid変数の箇所のように記述することでその処理のidを取得し、clearInterValメソッドの引数に渡します。

この処理の方法ですとアニメーションの動きが単調になりますね。実際にアニメーションを作る時にはおそらくこんな書き方はしないと思いますので、ここでは基礎の動かし方の一つとして覚えておきましょう。