ネイティブ JavaScript を使用して要素から CSS クラスを削除する方法

ネイティブ JavaScript を使用した要素からの CSS クラスの削除

JavaScript を使用した HTML 要素からの CSS クラスの削除は、3 番目の方法に依存せずに実現できます。 jQuery のようなパーティ ライブラリ。以下は詳しい手順です:

1.ターゲット要素を特定します:

document.querySelector() メソッドを使用して、クラスを削除する HTML 要素を選択します。要素の ID または別の一意の識別子を指定します。

2. classList プロパティを使用します:

最新のブラウザは、すべての要素で classList プロパティをサポートしています。このプロパティは、要素に適用される CSS クラスのリストを表します。

3.クラスを削除します:

クラスを削除するには、単に classList.remove() メソッドを使用し、クラス名を引数として渡します。例:

const element = document.querySelector('#element');
element.classList.remove('red');

例:

次のコード スニペットは、実際の要素から「red」CSS クラスを削除する方法を示しています。シナリオ:

const button = document.querySelector('#remove');
const element = document.querySelector('#el');

button.onclick = () => {
  element.classList.remove('red');
};

HTML:

<div>

CSS:

.red {
  background: red;
}

「クラスの削除」 「」ボタンをクリックすると、「赤」の CSS クラスが要素から削除され、背景色が変更されます。デフォルト。

以上がネイティブ JavaScript を使用して要素から CSS クラスを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。