JavaScriptのclassListでCSSのクラスを追加/削除するサンプルです。
目次
説明 | classList |
サンプル | CSSのクラスを追加/削除する(add/remove) |
CSSのクラスを追加/削除する(toggle) | |
CSSのクラスを入れ替える(replace) |
classList
変数 = elementNodeReference.classList; |
- DOMTokenListを返します。
- classListに対してaddやremoveやtoggle等のメソッドを使用できます。
- 以下は、MDNのclassListのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
CSSのクラスを追加/削除する(add/remove)
CSSのクラスを追加/削除するサンプルです。
ボタン1を押すと、CSSのクラスを指定して背景色がピンクになり文字が小さくなります。
ボタン2を押すと、CSSのクラスを指定して背景色が青になり文字が大きくなります。
ボタン3を押すと、removeClassメソッドで設定したCSSのクラスを解除します。
ボックス1
上記サンプルのコードです。
<style>
#box1 {
width: 130px;
height: 80px;
border: 1px solid #000;
}
.cssTest1 {
font-size: 14px;
background-color: MistyRose;
}
.cssTest2 {
font-size: 20px;
background-color: LightSkyBlue;
}
</style>
<div id="box1">ボックス1</div>
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<input type="button" value="ボタン2" onclick="clickBtn2()" />
<input type="button" value="ボタン3" onclick="clickBtn3()" />
<script>
function clickBtn1() {
const qs1 = document.querySelector("#box1");
qs1.classList.remove("cssTest2");
qs1.classList.add("cssTest1");
}
function clickBtn2() {
const qs1 = document.querySelector("#box1");
qs1.classList.remove("cssTest1");
qs1.classList.add("cssTest2");
}
function clickBtn3() {
const qs1 = document.querySelector("#box1");
qs1.classList.remove("cssTest1", "cssTest2");
}
</script>
25行目は、removeメソッドで指定のCSSを削除しています。
26行目は、addメソッドで指定のCSSを追加しています。
37行目は、removeメソッドで複数のCSSを指定して削除しています。
CSSのクラスを追加/削除する(toggle)
CSSのクラスを追加/削除するサンプルです。
ボタンを押すと、CSSのクラスを指定して背景色がピンクになり文字が小さくなります。
再度ボタンを押すとCSSが削除されます。
ボックス
上記サンプルのコードです。
<style>
#box3 {
width: 130px;
height: 80px;
border: 1px solid #000;
}
.cssTest3 {
font-size: 14px;
background-color: MistyRose;
}
</style>
<div id="box3">ボックス</div>
<input type="button" value="ボタン" onclick="clickBtn4()" />
<script>
function clickBtn4() {
const qs1 = document.querySelector("#box3");
qs1.classList.toggle("cssTest3");
}
</script>
19行目は、toggleメソッドです。対象のCSSが存在するときは削除し、存在しないときは追加します。
CSSのクラスを入れ替える(replace)
replace("変更前のCSSのクラス","変更後のCSSのクラス") |
replaceメソッドは、CSSを入れ替えることができます。
<style>
#box1 {
width: 130px;
height: 80px;
border: 1px solid #000;
}
.cssTest1 {
font-size: 14px;
background-color: MistyRose;
}
.cssTest2 {
font-size: 20px;
background-color: LightSkyBlue;
}
</style>
<div id="box1" class="cssTest1">ボックス1</div>
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<input type="button" value="ボタン2" onclick="clickBtn2()" />
<script>
function clickBtn1() {
const qs1 = document.querySelector("#box1");
qs1.classList.replace("cssTest2", "cssTest1");
}
function clickBtn2() {
const qs1 = document.querySelector("#box1");
qs1.classList.replace("cssTest1", "cssTest2");
}
</script>
24,29行目は、replaceメソッドでCSSを入れ替えています。
関連の記事