【JavaScript】HTML要素のclass属性を操作できるclassNameメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptでHTML要素のclass属性に対して様々な操作ができるclassNameメソッドについて

classNameメソッドとは
classNameメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
classNameメソッドとは
classNameメソッドでHTML要素のclass属性を取得
classNameメソッドでHTML要素のclass属性を変更
classNameメソッドでHTML要素のclass属性を追加
まとめ：classNameメソッドを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

classNameメソッドとは

classNameメソッドとは、HTML要素のclass属性に対して

取得
変更
追加

ができるメソッドです。

classNameメソッドの基本的な書き方は

【HTML要素】.className

1	【HTML要素】.className

です。
HTML要素を取得するには、getElementByIdメソッドを使う、というやり方があります。
詳しくはこちらの記事をご参考ください。

【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

次の章からサンプルプログラムをまじえて

classNameメソッドでHTML要素のclass属性を取得
classNameメソッドでHTML要素のclass属性を変更
classNameメソッドでHTML要素のclass属性を追加

と解説します。
解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
classNameメソッドを解説するディレクトリ構成

classNameメソッドでHTML要素のclass属性を取得

classNameメソッドでHTML要素のclass属性を取得について解説します。

取得するには

var sample = 【HTML要素】.className;

1	var sample = 【HTML要素】.className;

と書けば、sampleに指定したHTML要素のclassを取得することができます。

サンプルプログラムではclassNameメソッドでdivタグのclassを取得して、アラートで表示させます。

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>classNameメソッドサンプル</title>
        <script src="js\sample_javascript.js"></script>
    </head>
    <body>
        <h1>classNameメソッドで取得</h1>
        <div id="sample" class="hogehoge">ほげほげ</div>
        <input type="button" onclick="alertButton()" value="ボタン">
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>classNameメソッドサンプル</title>

</head>

<body>

<h1>classNameメソッドで取得</h1>

</body>

</html>

JavaScriptサンプルプログラム

function alertButton(){
    var sample = document.getElementById('sample');
    alert('sampleのclass:' + sample.className);
}

function alertButton(){

var sample = document.getElementById('sample');

alert('sampleのclass:' + sample.className);

}

実行結果

作成したHTMLをブラウザで開き、【ボタン】を押します。
JavaScriptのclassNameメソッドの実行確認

指定したidがsampleのclass属性を取得できていることが確認できました。
JavaScriptのclassNameメソッドの実行確認

classNameメソッドでHTML要素のclass属性を変更

classNameメソッドでHTML要素のclass属性を変更について解説します。

変更するには

【HTML要素】.className = 【変更したい値】;

1	【HTML要素】.className = 【変更したい値】;

と書けば、指定したHTML要素のclassを変更することができます。

注意点として、すでに設定してあるclassの上書きをして変更する、という点です。
設定してあるものに追加する、ということはできないので、ご注意ください。

サンプルプログラムではclassNameメソッドでdivタグのclassを変更させます。

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>classNameメソッドサンプル</title>
        <script src="js\sample_javascript.js"></script>
    </head>
    <body>
        <h1>classNameメソッドで変更</h1>
        <div id="sample" class="hogehoge">ほげほげ</div>
        <input type="button" onclick="alertButton()" value="ボタン">
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>classNameメソッドサンプル</title>

</head>

<body>

<h1>classNameメソッドで変更</h1>

</body>

</html>

JavaScriptサンプルプログラム

function alertButton(){
    var sample = document.getElementById('sample');
    sample.className = 'piyo';
}

function alertButton(){

var sample = document.getElementById('sample');

sample.className = 'piyo';

}

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
divタグのclassは【hogehoge】であることを確認しました。
【ボタン】を押します。
JavaScriptのclassNameメソッドの実行確認

指定したidがsampleのclass属性を【hogehoge】から【piyo】に変更できたことが確認できました。
JavaScriptのclassNameメソッドの実行確認

classNameメソッドでHTML要素のclass属性を追加

classNameメソッドでHTML要素のclass属性を追加について解説します。

追加は変更のときと同じく

【HTML要素】.className = 【変更したい値】;

1	【HTML要素】.className = 【変更したい値】;

と書けば、指定したHTML要素のclassを追加することができます。

サンプルプログラムではclassNameメソッドでdivタグにclass属性を追加します。

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>classNameメソッドサンプル</title>
        <script src="js\sample_javascript.js"></script>
    </head>
    <body>
        <h1>classNameメソッドで追加</h1>
        <div id="sample">ほげほげ</div>
        <input type="button" onclick="alertButton()" value="ボタン">
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>classNameメソッドサンプル</title>

</head>

<body>

<h1>classNameメソッドで追加</h1>

</body>

</html>

JavaScriptサンプルプログラム

function alertButton(){
    var sample = document.getElementById('sample');
    sample.className = 'fuga';
}

function alertButton(){

var sample = document.getElementById('sample');

sample.className = 'fuga';

}

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
divタグのclassは指定されていないことを確認しました。
【ボタン】を押します。
JavaScriptのclassNameメソッドの実行確認

指定したidがsampleのclass属性に【fuga】が追加できたことが確認できました。
JavaScriptのclassNameメソッドの実行確認

まとめ：classNameメソッドを使ってみよう

以上がJavaScriptのclassNameメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ