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');

シンプルなクロスブラウザ解決策

すべてのクラスの変更:

className を使用してすべてのクラスを設定:

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

追加クラスの追加:

スペースと新しいクラス:

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 イベントに対するアクション

HTML でのインライン JavaScript の使用を避ける属性。代わりに、関数を作成し、onClick 属性で呼び出します:

<script>
  function changeClass() {
    // Action code
  }
</script>
<button onClick="changeClass()">My Button</button>

または addEventListener を使用して:

<script>
  window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
  }
</script>
<button>

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

jQuery の例

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

トグルクラス:

$('#MyElement').toggleClass('MyClass');

クリック イベントの割り当て:

$('#MyElement').click(changeClass);

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