WEBBLOG

JSでclass(クラス)値の追加と削除と追加削除両方

JSでclass(クラス)値の追加と削除と追加削除両方

jQuery でもHTMLのclass属性に値を追加できますが、メンテナンスのことを考えると JavaScript のみで追加削除するほうが個人的に良いと思っています。

まずは、id名が「id_one」のHTML要素にクラスを追加してみます↓

document.addEventListener('DOMContentLoaded', function() {

 if ( document.getElementById('id_one') ) {
  const id_ONE = document.getElementById('id_one');
  id_ONE.classList.add('class_one');     
 }

});

「DOMContentLoaded」はJSファイルがhead内の場合なども考えて記述しております。また今回の記事以外にも共通することなのですが、JSファイルでHTMLの要素を操作する場合は、理由がない限り</body>タグの手前に置くことを推奨します。

つぎにif文で id名「id_one」のHTML要素があるときだけ処理を発生させます。 「id_one」 の要素を変数(id_ONE)に置き換え、「.classList.add()」でクラス名「class_one」を追加します。

今度は追加の逆で削除したソースになります。クラス名「class_one」があり、最初のクラス名 「class_one」を削除する前提になります↓

document.addEventListener('DOMContentLoaded', function() {

 if ( document.querySelector('.class_one') ) {
  const class_ONE = document.querySelector('.class_one');
  class_ONE.classList.remove('class_one');     
 }

});

コチラの場合は、最初のクラス名「class_one」のHTML要素を取得して「.classList.remove()」で、「class_one」のクラス名を削除します。

最後によくハンバーガーメニューなど使用されるボタン押したらクラスが追加され、もう一度押すとクラスを削除する便利なJSソースの例になります↓

document.addEventListener('DOMContentLoaded', function() {

 if ( document.getElementById('id_one') ) {
  const id_ONE = document.getElementById('id_one');
  document.addEventListener('click', function() {
   id_ONE.classList.toggle('class_one');
  });
 }

});

id名「id_one」のHTML要素を取得して、「clickのイベント(マウスクリックやスマオの場合はタッチして押す)」を使用して 「id_one」のHTML要素 をクリックしたときに、クラス「class_one」が追加され、もう一度押すと「class_one」が削除されます。この追加と削除が両方できる「classList.toggle」はよく使用するので、JSの担当者は覚えて損はないと思います。