![素のJavascript(VanillaJS)で、要素に複数classを一括付与する方法[JavaScript]](https://tedate.jp/wp-content/uploads/2022/02/img-to-assign-multiple-classes-jpg.webp)
前回の記事では、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>
スプレッド構文「じゃない」、通常のclassList.addで複数付与する方法
なお、スプレッド構文を使わずに複数のclassを付与するベーシックな方法ももちろん存在します。
操作するclassがあまり多くない場合は、この方法も使い道がおおいにあります。
const myItem = document.querySelector('.content-item');
myItem.classList.add('is-text', 'is-bold');
// ↑通常のclassList.addでは、カンマ区切りでclassを一括付与することが可能
スプレッド構文に関する詳しい解説など
前回の記事でご紹介したのと同様、スプレッド構文に関する詳しい解説は、
Web制作者界隈でおなじみ、Mozillaが運営するMDNの次のページに掲載されています。
ぜひ一読をおすすめします。
スプレッド構文 – JavaScript | MDN
また classList.add() に関しても、次のページに詳細な解説があります。合わせて一読することで、理解が深まると思います。
Element.classList – Web API | MDN
この記事のまとめ
今回は、前回の記事の続編として、
スプレッド構文(...)を使って、「対象の要素に複数のclassを一括付与する方法」
について記事を書きました。
前回も書きましたが、
このスプレッド構文(…)、覚えておくと
かなり小回りが効きやすく、様々な場面で応用が効く構文です。
活用することで、きっとより効率の良いWeb制作に繋がると思います。
当サイトは今後も引き続き
多様な角度から、Web制作に関する記事を執筆してまいります。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。