JavaScriptでのスタイリングのための単一クラス

要素の状態に応じて与える2つのクラスがあるとします：

cssdiv.active {
  color: red;
}
div.passive {
  color: black;
}

実際には、2つのクラスの存在がここで 邪魔になる可能性があります。この場合、 セレクター :not を使用して スタイルを次のように書き直すことができます：

cssdiv.active {
  color: red;
}
div:not(.active) {
  color: black;
}

これにより、クラスを便利に切り替えて、 要素をアクティブまたは非アクティブにすることができます：

javascriptelem.classList.toggle('active');