ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で要素クラスを動的に管理するにはどうすればよいですか?

JavaScript で要素クラスを動的に管理するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-27 22:15:11
オリジナル
488 人が閲覧しました

How Can I Dynamically Manage Element Classes in JavaScript?

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート