【javascript】疑似要素（::after ::before）を操作する方法
以前にjavascriptでCSSを操作する方法について紹介しました。
【javascript】CSSを追加、削除、変更する方法
しかし、疑似要素はjavascriptで直接操作できないので、対処法を紹介します。
HTMLとCSSの設定
HTML <!-- 最初はクラスをyenに設定しておく -->
<span class="currency yen">100000</span> /* dollarとその疑似要素を用意しておく */
.yen, dollar {
position: relative;
}
.yen::after {
content: "円";
position: absolute;
top: 0;
right: -40px;
}
.dollar::after {
content: "ドル";
position: absolute;
top: 0;
right: -55px;
}結果：100000
疑似要素で円が表示されました。
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");
}
}); 結果：100000
ラジオボタンやセレクトボックスを使って実装
100000
円：
ドル：
100000
javascriptで疑似要素は直接操作できない。
javascriptでクラスを変更することによりコントロールする。
