ホームページ > ウェブフロントエンド > CSSチュートリアル > Pure JavaScript を使用して要素から CSS クラスを削除するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-12-21 07:05:09
オリジナル
620 人が閲覧しました

How Can I Remove CSS Classes from Elements Using Pure JavaScript?

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

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

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

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

実際の実装

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

ELEMENT.classList.remove("CLASS_NAME");
ログイン後にコピー

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

<div>
ログイン後にコピー
function remove() {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

remove.onclick = () => {
  remove();
};
ログイン後にコピー

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

以上がPure JavaScript を使用して要素から CSS クラスを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート