JavaScriptでクラス名の追加と削除を切り替える方法【classList.toggleの使い方】
JavaScriptで要素のクラス名の追加と削除を切り替えたい場合は、classList.toggle() メソッドを使うのが最も簡単です。このメソッドは、指定したクラスが要素に存在しなければ追加し、すでに存在していれば削除します。
コード例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.newStyle {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
padding: 25px;
background-color: rgb(147, 80, 255);
color: white;
font-size: 25px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<h1>JavaScriptでclassNameを操作するサンプル</h1>
<button class="btn">ここをクリック</button>
<h2>上のボタンをクリックすると、下のdivにクラス名が切り替わります</h2>
<div id="sampleDiv">
これはDIV要素です。
</div>
<script>
document.querySelector(".btn").addEventListener("click", toggleClassName);
function toggleClassName() {
var element = document.getElementById("sampleDiv");
element.classList.toggle("newStyle");
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「ここをクリック」ボタンを押すと、以下のようにスタイルが適用されます。
解説
この例では、ボタンに対して addEventListener() を使ってクリックイベントを登録しています。ボタンがクリックされると、getElementById() で対象の div 要素を取得し、classList.toggle("newStyle") を呼び出します。
- div 要素に「newStyle」クラスが付与されていない場合 → クラスが追加され、紫色の背景スタイルが適用されます。
- すでにクラスが付与されている場合 → クラスが削除され、元のスタイルに戻ります。
このように classList.toggle() を使えば、条件分岐（if文）を書かなくても、ワンライナーでクラス名のオン・オフを簡単に実現できます。アコーディオンメニュー、タブ切替、ダークモードの表示切替など、さまざまなUI実装で活用できる便利なメソッドです。
-
JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法
はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table> <tr id=StudentDetails> &
-
CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！
ダークモードとは？導入のメリット ダークモードは、夜間や暗い場所での閲覧時に目への負担を軽減できるうえ、有機EL（OLED）ディスプレイ搭載のスマートフォンやPCではバッテリー消費を抑えられる効果も期待できる、近年多くのWebサービスで標準となっている機能です。この記事では、CSSとJavaScriptを組み合わせて、ボタン操作ひとつでダークモードとライトモードを切り替える方法を、実際に動くサンプルコード付きで解説します。 切り替えの仕組み 実装の考え方は非常にシンプルです。まず、ライトモード（白背景・黒文字）のスタイルをbody要素のデフォルトとして定義し、ダークモード（黒背景・白文字）用の