JS class属性の変更

DOMの各ノードにはclassListオブジェクトがあり、中の方法でノード上のCSSクラスを追加、削除、修正することができます.ノードにCSSクラスが付与されているかどうかを判断するためにも使用できます.

add(クラス名)追加クラス名

remove(クラス名)削除クラス名

replace(誰を置き換え、何を置き換えるか)

を置き換える

contains(クラス名)ブール値

toggle(クラス名)戻り値かブール値かを切り替える(あれば切る、なければ加える)

item(インデックス)

やってみる

追加クラス(add)box.classList.add(‘red’,‘blue’);

このフォーマットはすべて同じで、試してみることができます;

 document.onclick = function(){
        // addClass(box,'red');
        box.classList.add('red','blue');
        console.log(box.classList.contains('bg'))
        box.classList.replace('bg','red');
        console.log(box.classList.contains('red'))
        console.log(box.classList.toggle('bg'));
        console.log(box.classList);
    }