Pure JavaScript を使用して要素から CSS クラスを削除するにはどうすればよいですか?

純粋な JavaScript を使用して要素から CSS クラスを削除する

Web 開発の分野では、次のような手段に頼らずに要素から CSS クラスを削除するタスク。 jQueryがよく出てきます。この探求には、JavaScript の機能を徹底的に理解する必要があります。

最新のアプローチ: ClassList によるレスキュー

現在の Web 標準に準拠した方法でこの目的を達成するには、 classList プロパティは、推奨されるメソッドとして優れています。主要なブラウザの大部分でサポートされているこの属性は、クラスを操作する直接的な手段を提供します。

実際の実装

classList の使用法を説明するには、次のコードを検討してください。スニペット:

ELEMENT.classList.remove("CLASS_NAME");

さらに詳しく説明する例を次に示します。 clarity:

<div>
<pre class="brush:php;toolbar:false">function remove() {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

remove.onclick = () => {
  remove();
};

このコード内では、remove() 関数は classList.remove() を利用して、ID el の要素から「red」クラスを削除します。 ID が削除のボタンをクリックすると、このアクションがトリガーされ、対応する CSS スタイルが削除されます。