
JavaScript を使用して要素のクラスを動的に変更するにはどうすればよいですか?
クラス操作のための最新の HTML5 テクニック
最新のブラウザのサポートclassList プロパティ。これは、クラスを追加、削除、または切り替えるための便利なメソッドを提供します。外部ライブラリが必要です:
1 2 3 4 | 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 を使用します。
1 | document.getElementById( "MyElement" ).className = "MyClass" ;
|
ログイン後にコピー
追加の追加クラス
スペースと新しいクラス名を追加します:
1 | document.getElementById( "MyElement" ).className += " MyClass" ;
|
ログイン後にコピー
クラスの削除
正規表現を使用して置換します:
1 2 | document.getElementById( "MyElement" ).className =
document.getElementById( "MyElement" ).className.replace(/(?:^|\s)MyClass(?!\S)/g , '' );
|
ログイン後にコピー
チェッククラスが適用される場合
1 | if ( document.getElementById( "MyElement" ).className.match(/(?:^|\s)MyClass(?!\S)/) )
|
ログイン後にコピー
イベント
の処理:
- onClick 属性の関数を呼び出すことで、これらのアクションを onclick または他のイベントに割り当てることができます:
1 | <button onClick= "changeClass()" ></button>
|
ログイン後にコピー
- での addEventListener の使用JavaScript:
1 | document.getElementById( "MyElement" ).addEventListener( 'click' , changeClass);
|
ログイン後にコピー
JavaScript フレームワークとライブラリ
フレームワークとライブラリは、jQuery などのタスクを簡素化します:
1 2 | $( '#MyElement' ).addClass( 'MyClass' );
$( '#MyElement' ).click(changeClass);
|
ログイン後にコピー
以上がJavaScript で要素クラスを動的に管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。