ホームページ >ウェブフロントエンド >CSSチュートリアル >jQuery操作要素CSSスタイルの3つの方法を詳しく解説
jQuery操作要素CSSスタイルの3つの方法を詳しく解説
- 高洛峰オリジナル
- 2017-03-13 10:15:301411ブラウズ
jQuery は、ページ要素のスタイルを変更するための 3 つのメソッドを提供します。これらは従来のメソッドに似ていますが、多くのコードを節約できます
ページ要素のスタイルを変更するのに 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") も提供します。
以下は完全な例です。
コードは次のとおりです:
<!DOCTYPE HTML>
<head>
<title>图片闪烁</title>
<style type="text/css">
@-webkit-keyframes twinkling{ /*透明度由0到1*/
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
.up{
-webkit-animation: twinkling 1s infinite ease-in-out;
}
</style>
</head>
<body>
<p id="soccer" class="up">
哈哈
</p>
<br/>
<input type="button" onclick='btnClick()'>
<script src="./jQuery/jquery-1.8.3.js" type="text/javascript"></script>
<script>
function btnClick(){
//$("#soccer").removeClass("up");
$("#soccer").toggleClass("up");
//$("p:first").removeClass("intro");
}
</script>
</body>
</html>以上がjQuery操作要素CSSスタイルの3つの方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。