JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのclassList.addメソッドを使ってclass属性を追加する方法について解説しています。classListのaddメソッドではclassの値を追加することができます。基本の書き方と複数のclassを追加する場合の書き方を覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

classList.addメソッドを使ってclass属性を追加する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

addメソッドとは

addメソッドとは指定した文字列などをclassに対して追加するメソッドです。

classはHTMLのスタイル指定に使う属性です。

JavaScriptでHTMLのタグを取得すると、「classList」がプロパティとして入っています。

classListは、HTMLのclassの変更や削除などの操作をするメソッドを持っており、その中の要素に対して追加を行うメソッドがaddとなります。

 

 

addメソッドの使い方

JavaScriptでエレメントを取得し、.add(【追加するクラス名】)とすることで使用可能です。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

class属性を追加する方法

addメソッドを使用した場合、HTMLにはclass属性が追加されます。

追加するクラス名を複数指定することで、複数のクラスを追加することも可能です。

 

実際に書いてみよう

まずはclassを追加するために簡単なHTMLを用意しましょう。

このコードではclassを変更するdivタグにIDとして、targetという名前をつけています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="target" class="red">ここにclassを追加することでスタイルを変更します</div>
</body>
</html>

次に追加するclassのcssを用意しましょう。

ここでは、追加されたことがわかるように色をつけるスタイルを3つ用意します。

.red{
  background-color: red;
/*   背景が赤 */
}
.green{
  color: green;
/*   文字が緑 */
}
.blue{
  border: solid 2px blue;
/*   枠線が青 */
}

最後にJavaScriptのソースをみていきます。

HTMLのdivタグを取得し、classList.addメソッドで2つのclassを追加しました。

const div = document.getElementById('target');
div.classList.add('green','blue');

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptのclassList.addメソッドを使ってclass属性を追加する方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。