
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
1 | <button onClick= "changeClass()" >My Button</button>
|
ログイン後にコピー
-
JavaScript
1 2 3 | function changeClass() {
}
|
ログイン後にコピー
または、 addEventListener を使用する:
1 2 3 | window.onload = function () {
document.getElementById( "MyElement" ).addEventListener( 'click' , changeClass);
}
|
ログイン後にコピー
JavaScript フレームワークとライブラリ
jQuery などのライブラリは、次のタスクを簡素化します:
-
変更するにはクラス
1 2 3 | $( '#MyElement' ).addClass( 'MyClass' );
$( '#MyElement' ).removeClass( 'MyClass' );
if ($( '#MyElement' ).hasClass( 'MyClass' ))
|
ログイン後にコピー
-
クラスの追加/削除のショートカット
1 | $( '#MyElement' ).toggleClass( 'MyClass' );
|
ログイン後にコピー
-
クリックに機能を割り当てるイベント
1 | $( '#MyElement' ).click(changeClass);
|
ログイン後にコピー
以上がJavaScript を使用して要素のクラスを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。