JavaScript を使用して要素のクラスを変更するにはどうすればよいですか?

JavaScript を使用して要素のクラスを変更する方法

JavaScript は、onclick などのさまざまなイベントに応答して、HTML 要素のクラスを変更するためのいくつかの手法を提供します。

モダン 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');

クロスブラウザ解決策

より幅広いブラウザ互換性を実現するには:

すべてのクラスを変更するには

• 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 を分離するには、次の使用をお勧めします。関数:

• HTML

  <button onClick="changeClass()">My Button</button>

• JavaScript

  function changeClass() {
    // Code examples from above
  }

または、 addEventListener を使用する:

window.onload = function() {
    document.getElementById("MyElement").addEventListener('click', changeClass);
}

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

jQuery などのライブラリは、次のタスクを簡素化します:

• 変更するにはクラス

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

• クラスの追加/削除のショートカット

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

• クリックに機能を割り当てるイベント

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

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