JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

JavaScriptを使ってHTML要素にクラス名を追加するには、classList.add()メソッドを使用するのが最も簡単で推奨される方法です。この記事では、ボタンをクリックしたときにdiv要素へ新しいスタイル（クラス）を動的に適用する具体例を、コードと実行結果つきで解説します。

コード例

<!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">Click here</button>
<h2>上のボタンをクリックすると、下のdivにclassNameが追加されます</h2>
<div id="sampleDiv">
これはDIV要素です。
</div>
<script>
    document.querySelector(".btn").addEventListener("click", addClassName);
    function addClassName() {
        var element = document.getElementById("sampleDiv");
        element.classList.add("newStyle");
    }
</script>
</body>
</html>

実装のポイント

1. クリックイベントの設定

document.querySelector(".btn")でボタン要素を取得し、addEventListener("click", addClassName)によって、クリックされたときに実行される関数を登録しています。これにより、ユーザーの操作に応じて動的に処理を発生させることができます。

2. 対象要素の取得とクラスの追加

document.getElementById("sampleDiv")でIDを指定して対象のdiv要素を取得し、element.classList.add("newStyle")を呼び出すことで、既存のクラスを上書きすることなく新しいクラス「newStyle」を追加できます。classList.add()は複数のクラスを同時に追加することも可能で、element.classList.add("classA", "classB")のように記述します。

出力結果

上記のコードを実行すると、最初は次のように表示されます。

JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

「Click here」ボタンをクリックすると、div要素にnewStyleクラスが適用され、背景色や文字色などのスタイルが変化します。

JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

このように、classList.add()を使えば、ページを再読み込みすることなく要素の見た目を動的に変更できます。逆にクラスを削除したい場合はclassList.remove()、追加・削除を切り替えたい場合はclassList.toggle()を使用すると便利です。

  1. JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

    要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。 実装例（サンプルコード） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

  2. JavaScriptのみで各li要素に個別のクラス名を追加する方法

    JavaScriptでli要素にクラスを追加するには、forEach()とclassList.add()を組み合わせて使用します。jQueryなどのライブラリに頼らず、純粋なJavaScript（バニラJS）だけで各要素に個別のクラスを付与できるのがポイントです。基本的な考え方querySelectorAll()で対象の要素をすべて取得し、forEach()で1つずつループ処理を行います。ループのインデックス番号（i）を条件分岐に使うことで、特定の要素だけに異なるクラスを追加することも可能です。サンプルコード以下がそのコードです −<!DOCTYPE html> <