「JavaScript」toggleメソッドでCSSのクラスを追加/削除する
環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.62
構文
const 変数名 = document.querySelector(セレクター名);
変数名.classList.toggle(css名);
toggleメソッドを使って、対象のCSSが存在するときは削除し、存在しないときは追加します。
使用例
<!DOCTYPE html>
<html>
<body>
<style>
.cft {
width: 120px;
height: 80px;
border: 1px solid #000;
}
.test{
font-size: 14px;
background-color: SkyBlue;
}
</style>
<script>
function add() {
// クラスcft要素の取得
const tt = document.querySelector(".cft");
//toggleメソッド
tt.classList.toggle("test");
}
</script>
<div class="cft">ボックス</div>
<p>
<input type="button" value="追加" onclick="add()" /></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<style>
.cft {
width: 120px;
height: 80px;
border: 1px solid #000;
}
.test{
font-size: 14px;
background-color: SkyBlue;
}
</style>
<script>
function add() {
// クラスcft要素の取得
const tt = document.querySelector(".cft");
//toggleメソッド
tt.classList.toggle("test");
}
</script>
<div class="cft">ボックス</div>
<p>
<input type="button" value="追加" onclick="add()" /></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<style>
.cft {
width: 120px;
height: 80px;
border: 1px solid #000;
}
.test{
font-size: 14px;
background-color: SkyBlue;
}
</style>
<script>
function add() {
// クラスcft要素の取得
const tt = document.querySelector(".cft");
//toggleメソッド
tt.classList.toggle("test");
}
</script>
<div class="cft">ボックス</div>
<p>
<input type="button" value="追加" onclick="add()" /></p>
</body>
</html>
実行結果
「追加」ボタンを押すと、CSSのクラスを指定して背景色が「SkyBlue」になり文字が小さくなります。
再度ボタンを押すとCSSが削除されます。