[JavaScript]JavaScriptでHTMLの要素のclassを変更する

投稿者:

ユーザの操作で文字の色や背景等を変更したい場合がある。そういう時は、CSSに変更前・変更後のクラスを定義しておき、JavaScriptで切り替えるとよい。

classNameプロパティを変更する方法

やり方は、要素のオブジェクトを取得し、そのclassnameプロパティを変更する。

HTML+CSSファイル
test001.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>JavascriptでHTMLのクラスを変更する</title>
        <meta charset="UTF-8">
        <script src="./test001.js"></script>
        <style>
            .red {  /* 文字を赤色にするクラス */
                font-size:200%;
                color:red;
                font-weight: bold;
            }
            .blue { /* 文字を青色にするクラス */
                font-size:200%;
                color:blue;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <button onclick="redMessage();">赤</button>
        <button onclick="blueMessage();">青</button>

        <p id="message" class="red">Hello World</p>
    </body>
</html>
JavaScriptファイル
test001.js
function redMessage () {
    //オブジェクト取得
    var p = document.getElementById("message");
    //classを変える(red)
    p.className = "red";
}

function blueMessage () {
    //オブジェクト取得
    var p = document.getElementById("message");
    //classを変える(blue)
    p.className = "blue";
}

test001.htmlを開くと次のようなページが表示される。

「赤」「青」ボタンをクリックすると文字の色が変更される。


classListを操作する方法

既に設定済みのクラスを生かしたまま、別のクラスを適用したいときは、要素のclassListオブジェクトに対してadd()、remove()メソッドでクラスを追加削除する。

HTML+CSSファイル
test002.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>JavascriptでHTMLのクラスを変更する2</title>
        <meta charset="UTF-8">
        <script src="./test002.js"></script>
        <style>
            .helloworld { /* 文字の大きさと太さを定義 */
                font-size:200%;
                font-weight: bold;
            }
            .red {  /* 文字を赤色にするクラス */
                color:red;
            }
            .blue { /* 文字を青色にするクラス */
                color:blue;
            }
        </style>
    </head>

    <body>
        <button onclick="redMessage();">赤</button>
        <button onclick="blueMessage();">青</button>

        <p id="message" class="helloworld">Hello World</p>
    </body>
</html>
JavaScriptファイル
test002.js
function redMessage () {
    //オブジェクト取得
    var p = document.getElementById("message");
    //classを変える(red)
    p.classList.remove("blue"); //blueが適用されているときは削除
    p.classList.add("red");     //redを適用
}

function blueMessage () {
    //オブジェクト取得
    var p = document.getElementById("message");
    //classを変える(blue)
    p.classList.remove("red");  //redが適用されているときは削除
    p.classList.add("blue");    //blueを適用
}

先ほどの例と違うのは最初は黒い文字で「Hello World」が表示されるところだ。これはhelloworldクラスで文字の大きさと太さだけを定義し、文字色の定義はredとblueクラスに分けたためだ。

「赤」ボタンをクリックすると、p要素からblueクラスが削除、redクラスが追加され、文字色が赤に変わる。
「青」ボタンをクリックすると、p要素からredクラスが削除、blueクラスが追加され、文字色が青に変わる。
helloworldクラスは追加も削除も無いので文字の大きさが変わることはない。

ちなみにremove()メソッドは指定したクラスが無いときは何もせず、add()メソッドも引数のクラスが既に存在する場合は何もしない。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください