JavaScript 要素クラスを効率的に操作するにはどうすればよいですか?

JavaScript クラス操作テクニック

オンデマンドで要素のクラスを変更する

クリックなどのイベントに基づいて要素のクラスを動的に変更するために、JavaScript はいくつかのアプローチを提供します:

最新の HTML5 クラス操作

最新のブラウザはクラス処理を簡素化する classList をサポートしています。

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if (document.getElementById("MyElement").classList.contains('MyClass'));
document.getElementById("MyElement").classList.toggle('MyClass');

クロスブラウザ ソリューション

classList がないブラウザの場合は、次のメソッドを使用します。

すべてのクラスを置換

すべてを置換するように className 属性を設定します既存のクラス:

document.getElementById("MyElement").className = "MyClass";

クラスの追加

既存の className にスペースと新しいクラス名を追加します:

document.getElementById("MyElement").className += " MyClass";

クラスの削除

正規表現を使用して、影響を与えずに特定のクラスを削除しますその他:

document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '');

クラスが存在するかどうかを確認します

クラスの削除に同じ正規表現を使用して、クラスの存在を確認します:

if (document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/))

onClick イベントへの関数のアタッチ

これらのアクションを関数でラップし、イベントから呼び出しますハンドラー:

function changeClass() {
  // Code examples from above
}
document.getElementById("MyElement").addEventListener('click', changeClass);

JavaScript フレームワークとライブラリ

jQuery のようなフレームワークはクラス操作を合理化します:

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ($('#MyElement').hasClass('MyClass'))
$('#MyElement').click(changeClass);

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