クイックヒント：Vanilla JavaScriptを使用してCSSクラスを追加または削除する

JavaScriptを使用して、CSSクラスを動的に追加および削除して、簡単にWeb要素を操作します！この記事では、javaScriptのclassName属性とclassList属性を使用してCSSクラスを効率的に管理する方法を説明し、メニューの表示/隠しメニュー、フォームエラー、または要素アニメーションの強調表示など、Webページ要素の動的な変更を実現する方法について説明します。

コアポイント：

• JavaScriptを使用して、ユーザーのインタラクションに基づいてページ要素を動的に変更できます（メニューの表示/隠し、フォームエラー、アニメーション効果など）。
• classNameおよびclassListプロパティは、CSSクラスを操作するための強力なツールです。 className classList
または
• 属性を使用して、関数を作成し、要素にクラスを追加または削除できます。これらの関数は、文字列セレクターまたは要素自体をパラメーターとして使用し、要素をループし、指定されたクラスを追加または削除することができます。 className classList
属性（IE10以降のブラウザによってサポートされている）は、クラスを追加または削除するプロセスを簡素化する
• 、classList、addなどのクラスを操作する一連のメソッドを提供します。 remove toggle

互換性スキーム：

プロパティを使用className

属性は、HTML要素のクラス属性へのアクセスを可能にします。文字列操作により、クラスを追加および削除できます。

メソッドを使用して、HTML要素を選択します（IE8以降のブラウザと互換性があります）。 className querySelectorAll()

クラスを追加：

function addClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  for (let i = 0; i < elements.length; i++) {
    if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
      elements[i].className += ' ' + myClass;
    }
  }
}

クラスを削除：

function removeClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
  for (let i = 0; i < elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg, ' ');
  }
}

近代化ソリューション：

プロパティを使用classList IE10以降のブラウザ以降は、

属性をサポートし、クラスの操作を簡素化します。

classList

クラスを追加：

function addClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.add(myClass));
}

クラスを削除：

function removeClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.remove(myClass));
}

概要

この記事では、プロパティと

プロパティを使用してCSSクラスを追加および削除する方法を紹介します。これらのスキルを習得することにより、Web要素の動的効果を簡単に達成し、ユーザーエクスペリエンスを向上させることができます。

classNameclassListFAQ（FAQ）

バニラJSを使用してCSSクラスを追加または削除する目的？

ユーザー操作に応じてスタイルを変更する、要素を表示/隠し、アニメーションエフェクトを作成するなど、HTML要素の外観と動作を動的に制御します。

• を使用して複数のクラスを追加するにはどうすればよいですか？
クラス名を独立したパラメーターとして渡す：

• classList.add() element.classList.add("class1", "class2", "class3");要素に存在しないクラスを削除できますか？

  はい、
はエラーを報告しませんが、操作を実行しません。

• 要素に特定のクラスが含まれているかどうかを確認する方法は？ classList.contains()メソッドを使用して、ブール値を返します。

• 複数の要素を持つクラスを同時に操作する方法は？ querySelectorAll()を使用して要素を選択し、各要素のクラスをループして操作します。

• 要素のクラスを切り替えるにはどうすればよいですか？ classList.toggle()メソッドを使用します。

• classNameとclassListの違いは？ classNameは文字列属性です。 classList DOMTokenList

• SVG要素はサポートされていますか？ サポート。 classList

  ブラウザの互換性は

• の互換性はどうですか？ 最新のブラウザは広くサポートされており、IE9以下はサポートされていません。 classList

• メソッドをチェーンで呼び出すことはできますか？ はい。 classList

この記事があなたに役立つことを願っています！

以上がクイックヒント：Vanilla JavaScriptを使用してCSSクラスを追加または削除するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。