ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery は element_jquery の CSS スタイルを操作します

JQuery は element_jquery の CSS スタイルを操作します

WBOY
WBOYオリジナル
2016-05-16 16:10:351357ブラウズ

ページ要素のスタイルを変更するために Javascript をよく使用します。 1 つの方法は、ページのメタを変更することです

要素 CSS クラス (Class)、従来の Javascript では、通常 HTML を処理します

Dom のクラス名機能が実装されており、jQuery にはこの関数を実装するための 3 つのメソッドが用意されています。

従来の方法と同じ考え方を持っていますが、多くのコードを節約できます。まだ同じ文 –

「jQuery を使用すると JavaScript コードが簡潔になります!」

1. addClass() – CSS クラスを追加します

コードをコピーします コードは次のとおりです:

$(“#target”).addClass(“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 スタイルが定義されている場合、それは削除されます。
//逆にIDにはCSSクラス「newClass」が割り当てられます。


実際のアプリケーションでは、多くの場合、最初にこれらの CSS クラスを定義し、次に Javascript イベントを通じてそれらをトリガーします

投稿 (リンクをクリックするなど) してページ要素のスタイルを変更します。さらに、jQuery はメソッド

も提供します。

メソッド hasClass(“className”) は、要素に CSS クラスが割り当てられているかどうかを判断するために使用されます。

以下は完全な例です。

コードをコピー コードは次のとおりです:



画像が点滅