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 属性の関数を呼び出すことで、これらのアクションを onclick または他のイベントに割り当てることができます:

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

• での addEventListener の使用JavaScript:

document.getElementById("MyElement").addEventListener('click', changeClass);

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

フレームワークとライブラリは、jQuery などのタスクを簡素化します:

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

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