JavaScriptで要素にクラスを追加するには、element.classList.addメソッドを使用します。
目次
基本構文
element.classList.add(
'class-name' //追加したいクラス名を指定
);サンプル集
サンプル1
bodyタグに対して「is-open」を追加する。
const bodyEl = document.querySelector('body');
bodyEl.classList.add('is-open');サンプル2
bodyタグに対して複数のクラス「item01 item02」を同時に追加する。
const bodyEl = document.querySelector('body');
bodyEl.classList.add(['item01', 'item02']);サンプル3
イベントの対象要素(button)に「current」を追加する。
const buttonEl = document.querySelector('button');
//function
buttonEl.addEventListener('click', function() {
this.classList.add('current');
});
//アロー関数
buttonEl.addEventListener('click', (e) => e.target.classList.add('current'));