素のJavascript(VanillaJS)で、要素に複数classを一括付与する方法[JavaScript]

素のJavascript(VanillaJS)で、要素に複数classを一括付与する方法[JavaScript]
この記事をシェアする:
今回は手短に。前回の記事の続編になります。

前回の記事では、JavaScript の「スプレッド構文」(…)を用いて
「対象の要素がもつclassを一括削除する方法」について書きました。

今回はその逆バージョン、
「スプレッド構文」(…)を使って
「対象の要素に複数のclassを一括付与する方法」について、書いていきます。

書き方は削除の場合と同じ。「スプレッド構文」(…)を使って、要素に複数classを一括付与してみます

仮に、次のようなhtmlがあったとします。
この2行目の content-item というp要素に、複数のclassを付与したい場合。

<div class="content-wrapper">
  <p class="content-item">
    ↑この要素にclassを一括付与したい
  </p>
</div>

そんな場合は、次のように書く事で、簡単に複数classを付与することが可能です。

const myClasses = ['is-text', 'is-bold', 'has-decoration', 'has-animation'];
const myItem = document.querySelector('.content-item');
myItem.classList.add(...myClasses);
// ↑スプレッド構文(...)を使うことで、配列内のclassを一括付与することが可能

1行目では、付与したいclass名を配列として変数myClassesに格納しておきます。
2行目で、複数のclassを一括付与したい対象を querySelector() を使って指定。
3行目で、スプレッド構文(...)を使って複数のclassを一括付与しています。

上記の記述で、次のような結果が得られます。(p要素に、複数のclassを付与することができます)

<div class="content-wrapper">
  <p class="content-item is-text is-bold has-decoration has-animation">
    この要素のclassを操作したい
  </p>
</div>

スプレッド構文に関する詳しい解説など

前回の記事でご紹介したのと同様、スプレッド構文に関する詳しい解説は、
Web制作者界隈でおなじみ、Mozillaが運営するMDNの次のページに掲載されています。
ぜひ一読をおすすめします。
スプレッド構文 – JavaScript | MDN

また classList.add() に関しても、次のページに詳細な解説があります。合わせて一読することで、理解が深まると思います。
Element.classList – Web API | MDN

この記事のまとめ

今回は、前回の記事の続編として、
スプレッド構文(...)を使って、「対象の要素に複数のclassを一括付与する方法」
について記事を書きました。

前回も書きましたが、
このスプレッド構文(…)、覚えておくと
かなり小回りが効きやすく、様々な場面で応用が効く構文です。

活用することで、きっとより効率の良いWeb制作に繋がると思います。

当サイトは今後も引き続き
多様な角度から、Web制作に関する記事を執筆してまいります。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: