JavaScript

【サンプルあり】JavaScriptでidやclassを追加・削除する方法

 

JavaScriptでidやclassを追加・削除する方法を動くサンプルコード付きで紹介していきます。

Contents
  1. サンプルコード
  2. idの追加・削除
  3. classの追加・削除
  4. setAttribute/removeAttributeでidやclassの追加・削除

サンプルコード

document.createElement()でdiv要素を生成し、idやclassの追加をしています。

テキストをクリックすると追加したidやclassが削除され、styleの変化を確認することができます。

See the Pen ID / Class by POSIPAN (@posipan) on CodePen.

idの追加・削除

追加element.id = ‘値’;
削除（値を空にする）element.id = ”;
// id
let elementId = document.createElement('div');
elementId.innerText = 'idだよ';

// idの追加
elementId.id = 'valueId';

elementId.addEventListener('click', function() {
  // idの削除
  elementId.id = '';
  // this.id = '';
});

document.body.appendChild(elementId);

element.id = ”;でidを削除した場合、HTMLは以下のようになります。

<div id="">aaa</div>

classの追加・削除

基本

追加element.classList.add(‘値’);
削除（値の削除）element.classList.remove(‘値’);
// class
let elementCls = document.createElement('div');
elementCls.innerText = 'classだよ';

// classの追加
elementCls.classList.add('valueCls');

elementCls.addEventListener('click', function() {
   // classの削除
   elementCls.classList.remove('valueCls');
   // this.classList.remove('valueCls');
});

document.body.appendChild(elementCls);

複数classパターン

複数classの追加・削除も可能です。値をカンマ区切りで設定します。

追加element.classList.add(‘値1’, ‘値2’);
削除（値の削除）element.classList.remove(‘値1’, ‘値2’);
// 複数class
let elementMultiCls = document.createElement('div');
elementMultiCls.innerText = '複数classだよ';

// 複数classの追加
elementMultiCls.classList.add('valueMultiCls', 'active');

elementMultiCls.addEventListener('click', function() {
   // 複数classの削除
   elementMultiCls.classList.remove('valueMultiCls', 'active');
   // this.classList.remove('valueMultiCls', 'active');
});

document.body.appendChild(elementMultiCls);

element.classList.remove('値');でclassを削除し、値が1つもない場合、HTMLは以下のようになります。

<div class="">aaa</div>

setAttribute/removeAttributeでidやclassの追加・削除

追加element.setAttribute(‘属性’, ‘値’);
削除（属性の削除）element.removeAttribute(‘属性’);

setAttributeやremoveAttributeはidやclassに限らず他属性の追加・削除も可能です。

// id(setAttribute, removeAttribute)
let attrId = document.createElement('div');
attrId.innerText = 'setAttributeで設定したidだよ';

// id属性の追加
attrId.setAttribute('id', 'valueId');

attrId.addEventListener('click', function() {
   // id属性の削除
   attrId.removeAttribute('id');
   // this.removeAttribute('id');
});

document.body.appendChild(attrId);

// class(setAttribute, removeAttribute)
let attrCls = document.createElement('div');
attrCls.innerText = 'setAttributeで設定したclassだよ';

// class属性の追加
attrCls.setAttribute('class', 'valueCls');

attrCls.addEventListener('click', function() {
   // class属性の削除
   attrCls.removeAttribute('class');
   // this.removeAttribute('class');
});

document.body.appendChild(attrCls);

removeAttributeは属性をまるっと削除するため、
前章で紹介した削除方法とは動作が異なります。

HTMLは以下のようになります。

<div>aaa</div>
関連記事