「JavaScript」replaceメソッドでCSSを入れ替える

2022年2月7日2022年2月8日

書式
replace(“変更前のCSSのクラス","変更後のCSSのクラス")
replaceメソッドは、CSSを入れ替えります。

使用例

<style>
  #cft {
    width: 130px;
    height: 80px;
    border: 1px solid #000;
  }
  .kdfA {
    font-size: 14px;
    background-color: Skyblue;
  }
  .kdfB {
    font-size: 20px;
    background-color: yellow;
  }
</style>

<div id="cft" class="kdfA">CSS入れ替</div>
<p><input type="button" value="検証" onclick="funB()" /></p>

<script>

  function funB() {
    const qst = document.querySelector("#cft");
    //CSSを入れ替える
    qst.classList.replace("kdfA", "kdfB");
  }
</script>

実行結果
「検証」ボタンを押すと、CSSのクラス(kdfA)をクラスkdfBで入れ替えます。