2021.10.07こんにちは。たいら(@tairaengineer2)です。転職を繰り返し現在4社経験している、11年目エンジニアです。JavaScriptでHTML要素のclass属性に対して様々な操作ができるclassNameメソッドについてclassNameメソッドとはclassNameメソッドを使ったサンプルプログラムと、丁寧に解説していきます。前提条件:実行環境についてclassNameメソッドとはclassNameメソッドでHTML要素のclass属性を取得HTMLサンプルプログラムJavaScriptサンプルプログラム実行結果classNameメソッドでHTML要素のclass属性を変更HTMLサンプルプログラムJavaScriptサンプルプログラム実行結果classNameメソッドでHTML要素のclass属性を追加HTMLサンプルプログラムJavaScriptサンプルプログラム実行結果まとめ:classNameメソッドを使ってみよう前提条件:実行環境について実行環境は以下の通りです。追加ができるメソッドです。classNameメソッドの基本的な書き方はJavaScript【HTML要素】.className1【HTML要素】.classNameです。HTML要素を取得するには、getElementByIdメソッドを使う、というやり方があります。詳しくはこちらの記事をご参考ください。【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します次の章からサンプルプログラムをまじえてclassNameメソッドでHTML要素のclass属性を取得classNameメソッドでHTML要素のclass属性を変更classNameメソッドでHTML要素のclass属性を追加と解説します。解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。classNameメソッドでHTML要素のclass属性を取得classNameメソッドでHTML要素のclass属性を取得について解説します。【HTML要素】.className;と書けば、sampleに指定したHTML要素のclassを取得することができます。サンプルプログラムではclassNameメソッドでdivタグのclassを取得して、アラートで表示させます。作成したHTMLをブラウザで開き、【ボタン】を押します。指定したidがsampleのclass属性を取得できていることが確認できました。classNameメソッドでHTML要素のclass属性を変更classNameメソッドでHTML要素のclass属性を変更について解説します。【変更したい値】;と書けば、指定したHTML要素のclassを変更することができます。注意点として、すでに設定してあるclassの上書きをして変更する、という点です。設定してあるものに追加する、ということはできないので、ご注意ください。サンプルプログラムではclassNameメソッドでdivタグのclassを変更させます。作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。divタグのclassは【hogehoge】であることを確認しました。【ボタン】を押します。指定したidがsampleのclass属性を【hogehoge】から【piyo】に変更できたことが確認できました。classNameメソッドでHTML要素のclass属性を追加classNameメソッドでHTML要素のclass属性を追加について解説します。【変更したい値】;と書けば、指定したHTML要素のclassを追加することができます。サンプルプログラムではclassNameメソッドでdivタグにclass属性を追加します。作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。divタグのclassは指定されていないことを確認しました。【ボタン】を押します。指定したidがsampleのclass属性に【fuga】が追加できたことが確認できました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。ΔホームプログラムJavaScriptプロフィールこのブログを運営しているたいらと言います。プログラム言語を合計5言語経験している12年目エンジニアのブロガーです。このブログでは、どこよりも分かりやすくプログラムやツールのインストール方法などを解説し、エンジニアにの疑問解決に役立つ情報を発信します。お問い合わせなどがありましたら、下記のリンクからお願いします。お問い合わせこちらから記事の検索ができます。IDEAXAMPPお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。