kdcsライブラリー

パソコン版とモバイル版で違う動きをさせたい場合、動きを付ける要素のクラスをpcとmobileで切り替える方法。

例はheaderというidに、画面幅が780pxより広いときは「pc」、780px以下のときは「mobile」というクラスを付与して切り替える。

function updateHeaderClass() {
  const header = document.getElementById("header");
  if (!header) return;

  if (window.innerWidth <= 780) {
    header.classList.add("mobile");
    header.classList.remove("pc");
  } else {
    header.classList.add("pc");
    header.classList.remove("mobile");
  }
}

// 初回の実行
updateHeaderClass();

// ウィンドウサイズ変更時にクラス更新
window.addEventListener("resize", updateHeaderClass);

window.innerWidth を使って現在の画面幅を取得。
classList.add() と classList.remove() で不要なクラスを確実に排除。
resize イベントで画面サイズ変更に応答。