jqueryでクラススタイルを変更する方法を説明する例-フロントエンドQ&A-php.cn

jqueryでクラススタイルを変更する方法を説明する例

PHPz

リリース： 2023-04-07 14:20:59

オリジナル

1401 人が閲覧しました

jQuery は、Web サイトに動的な効果やインタラクティブな機能を追加するための人気のある JavaScript ライブラリです。最も一般的に使用される機能の 1 つは、クラススタイルの変更など、HTML 要素の CSS スタイルを変更することです。この記事では、jQuery を使用して授業スタイルを変更する方法と、実践的なヒントやテクニックを紹介します。

クラスの追加と削除
jQuery では、クラススタイルの追加と削除は非常に簡単です。 addClass() メソッドを使用して 1 つ以上のクラススタイルを追加し、removeClass() メソッドを使用して 1 つ以上のクラススタイルを削除できます。例は次のとおりです。

// 添加一个 class 样式
$(".my-element").addClass("active");

// 添加多个 class 样式
$(".my-element").addClass("active big");

// 删除一个 class 样式
$(".my-element").removeClass("active");

// 删除多个 class 样式
$(".my-element").removeClass("active big");

ログイン後にコピー

上記の例では、$() メソッドを使用して my-element という名前の HTML 要素を選択し、addClass() と RemoveClass( ) メソッドを使用して、クラススタイルを追加または削除します。

クラスの切り替え
クラススタイルの追加と削除に加えて、toggleClass() メソッドを使用してクラススタイルのステータスを切り替えることもできます。要素にすでにクラススタイルがある場合、このメソッドはクラススタイルを削除します。要素にクラススタイルがない場合、このメソッドはクラススタイルを追加します。例は次のとおりです。

// 切换 class 样式
$(".my-element").toggleClass("active");

ログイン後にコピー

上の例では、my-element という名前の要素の active クラススタイルを切り替えます。

クラスの遅延追加と削除
アニメーションの終了後など、一定の遅延時間の経過後にクラススタイルを追加または削除する必要がある場合があります。これを実現するには、setTimeout() メソッドと addClass() または RemoveClass() メソッドを使用します。例は次のとおりです:

// 添加一个 class 样式，并在 1 秒后删除
setTimeout(function() {
  $(".my-element").addClass("active");
  setTimeout(function() {
    $(".my-element").removeClass("active");
  }, 1000);
}, 1000);

ログイン後にコピー

上記の例では、まず setTimeout() メソッドを使用して 1 秒遅延させました。遅延コールバック関数では、 addClass() メソッド.## クラススタイルを削除し、再度 setTimeout() メソッドを使用して 1 秒遅延し、遅延コールバック関数で RemoveClass() メソッドを使用して active クラススタイルを削除します。

条件に基づいてクラスを変更する

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $(".my-element").addClass("scrolled");
  } else {
    $(".my-element").removeClass("scrolled");
  }
});

ログイン後にコピー

scrolled

クラススタイルを追加し、そうでない場合は、removeClass() メソッドを使用してクラススタイルを削除します。まとめ

この記事では、jQueryを使ってクラススタイルを変更する方法(追加、削除、切り替え、追加・削除の遅延、条件によるクラススタイルの変更など)を紹介しました。これらのヒントとテクニックは、jQuery をよりよくマスターし、より複雑なインタラクティブな関数や動的な効果を実現するのに役立ちます。

以上がjqueryでクラススタイルを変更する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。