ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery で要素 cssstyles_jquery を操作する 3 つの方法
jQuery で要素 cssstyles_jquery を操作する 3 つの方法
- WBOYオリジナル
- 2016-05-16 16:46:281075ブラウズ
ページ要素のスタイルを変更するために Javascript をよく使用します。 1 つの方法は、ページ要素の CSS クラス (Class) を変更することです。従来の Javascript では、通常、HTML Dom の classname 属性を処理することによってこれを実行します。ただし、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 スタイルが定義されている場合、それは削除されます。
//逆に、 CSS クラス「newClass」にはこの ID が割り当てられます。
実際のアプリケーションでは、最初にこれらの CSS クラスを定義し、次に Javascript イベント トリガー (リンクのクリックなど) を通じてページ要素のスタイルを変更することがよくあります。さらに、jQuery は、要素に CSS クラスが割り当てられているかどうかを判断するメソッド hasClass("className") も提供します。
以下は完全な例です。
@-webkit-keyframes きらめき{ /*透明度 0 to 1 */
0%{
opacity:0; /*透明度は 0*/
}
100%{
opacity:1; /*透明度は 1*/
}
}
.up{
-webkit-animation: きらめく 1 秒の無限イーズインアウト
}
🎜>