jQuery で CSS スタイルを追加または削除する方法

職場では、Javascript を使用してページ要素のスタイルを変更することが必要になることがよくあります。 1 つの方法は、ページ要素の CSS クラス (Class) を変更することです。従来の Javascript では、通常、HTML Dom の classname 属性を処理することによってこれを実行します。ただし、jQuery には、この機能を実現する 3 つのメソッドが用意されています。従来の方法ですが、多くのコードを節約できます。同じ文です - 「jQuery は JavaScript コードを簡潔にします!」

1. addClass() - CSS クラス

$("#target") を追加します。 "newClass");
//#target はスタイルを追加する必要がある要素の ID を指します
//newClass は CSS クラスの名前を指します

2.removeClass( ) - CSS クラスを削除します。

$("#target").removeClass("oldClass");
//#target は、CSS クラスが属する要素の ID を参照します。削除する必要があります
//oldClass は CSS クラスの名前を参照します

#3. toggleClass() - CSS クラスを追加または削除します## CSS クラスがすでに存在する場合は削除され、CSS クラスが存在しない場合は追加されます。

$("#target").toggleClass("newClass")

//ID「target」の要素に CSS スタイルが定義されている場合、それは削除されます。 , CSSクラス「newClass」にIDが割り当てられます。

実際のアプリケーションでは、最初にこれらの CSS クラスを定義し、次に Javascript イベント トリガー (リンクのクリックなど) を通じてページ要素のスタイルを変更することがよくあります。さらに、jQuery は、要素に CSS クラスが割り当てられているかどうかを判断するメソッド hasClass("className") も提供します。

FAQ:

<label for="TrueName" generated="true" class="msg-error" style="">正确</label>

By addClass("msg-success");

<label for="TrueName" generated="true" class="msg-error msg-success" style="">正确</label>

CSS文件
误：（msg-success将被msg-error覆盖，样式不变）
span.msg-error, label.msg-error{color: #f00;}
span.msg-success, label.msg-success{color: #000;}
正：
span.msg-error, label.msg-error{color: #f00;}
span.msg-success, label.msg-success{color: #000;}

以上がjQuery で CSS スタイルを追加または削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。