@utyuuuuclassList(add.remove)って何？
特定のhtml要素にcssで記述したクラスを追加、削除するJavaScriptのメソッドです！
例えば下の要素に新しいクラスを付与したい時
html
<div id="demo">ピーマン</div>
js
<script>
const element = document.getElementById("id");
element.classList.add("green pepper");
</script>
classList.addした後
<div id="demo" class="green pepper">ピーマン</div>
ロジックとして
- div id="demo"をhtmlから取得
- 取得したdiv idにclassList.addでgreen pepperを付与
という流れになります
クラスを削除するとき
classList.removeする前
<div id="demo" class="green pepper">ピーマン</div>
js
<script>
const element = document.getElementById("id");
element.classList.remove("green pepper");
</script>
class.List.removeした後
<div id="demo">ピーマン</div>
こちらのロジックは
- div id="demo"をhtmlから取得
- 取得したdiv idにclassList.removeでgreen pepperを削除
という流れになります
用途例
cssとの組み合わせでクリックした時に色を変えたり、要素を動かしたり様々な動きをつける事が可能になります！
最後に
簡単に要素の追加と削除が出来る便利なメソッドです！
さらにaddとremoveの動作を合わせたもっと便利なメソッドもあるのでどんどん使ってマスター出来るように一緒に頑張りましょう！
コメント
@jsdtue55
1
"id"ではなく"demo"ですね。クラス名に半角スペースを含めることはできません。
classList.add()に半角スペースを含むクラス名を指定するとエラーになります。上記は、
green pepperという半角スペースを含む1つのクラス名ではなく、greenとpepper2つのクラス名が指定されている状態になります。classList.remove()もclassList.add()と同様、半角スペースを含むクラス名を指定するとエラーになります。仮に
classList.remove()が成功してクラス名が全て無くなったとしてもclass属性は残り、ChromeであればFirefoxなら
となります。
情報発信するからには、どんな簡単なコードであっても実際に動作確認し、誤情報を発信しないよう心がけましょう。
いいね以上の気持ちはコメントで