【javascript】疑似要素（::after ::before）を操作する方法

【javascript】CSSを追加、削除、変更する方法

HTMLとCSSの設定

HTML

  <!--  最初はクラスをyenに設定しておく -->
  <span class="currency yen">100000</span> 

CSS

  /*  dollarとその疑似要素を用意しておく */
  .yen, dollar {
    position: relative;
  }
  .yen::after {
    content: "円";
    position: absolute;
    top: 0;
    right: -40px;
  } 
  .dollar::after {
    content: "ドル";
    position: absolute;
    top: 0;
    right: -55px;
  }

javascriptでクラスを変更する

javascript

  const btn = document.getElementById("btn");
  const currency = document.querySelector(".currency");
  btn.addEventListener("click", ()=>{
    if(btn.textContent=='ドル'){
      btn.textContent = '円';
      currency.classList.remove("yen");
      currency.classList.add("dollar");
    } else{
      btn.textContent = 'ドル'
      currency.classList.add("yen");
      currency.classList.remove("dollar");
    }
  }); 

ラジオボタンやセレクトボックスを使って実装