jQueryはCSSを操作します

CSS スタイルを変更する

要素のスタイルを変更するには、要素の CSS クラスを変更するか、要素のスタイルを直接変更できます。

要素は複数の CSS クラスを適用できますが、残念ながら DOM 属性では、配列ではなくスペース区切りの文字列で格納されます。したがって、元の JavaScript の時代では、要素に複数の属性を追加または削除したい場合は、文字列を自分で操作する必要がありました。

jQuery を使用すると、それが驚くほど簡単になります。

1. CSS クラスを変更する

次の表は、CSS クラスの変更に関連する jQuery メソッドです:

上記のメソッドを使用すると、要素の CSS クラスをコレクションのように変更できます。文字列を手動で解析します。

addClass(class) とremoveClass(classes) のパラメータは、スペースで区切って一度に複数の CSS クラスに渡すことができることに注意してください。例:

$("#btnAdd").bind("click", function(event) {
$("p").addClass("colorRed borderBlue");
});

removeClass メソッドのパラメータはオプションです。パラメータが渡されない場合、すべての CSS クラスが削除されます。 :

$("p") .removeClass();

2. CSS スタイルを変更する

同様に、要素の特定の CSS スタイルを変更したい場合、つまり要素の属性を変更する場合style" に対応するメソッドも jQuery で提供されています:

rrree

QQ截图20161022131305.png

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>使用jQ控制CSS</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"> .w1{font-size: 14px;} .w2{font-size: 20px; } </style> </head> <body> <ul> <li class="w1"><a href="#">公司简介</a> </li> <li class="w1"><a href="#">公司文化</a> </li> <li class="w1"><a href="#">发展战略</a> </li> <li class="w1"><a href="#">公司简介</a> </li> </ul> </body> <script type="text/javascript"> $(function () { $( ".w1").click(function () { $(this).removeClass("w1"); $(this).addClass("w2"); $(this).siblings().removeClass("w2"); $(this).siblings().addClass("w1"); }); }); </script> </html>

提出するリセットコード

自動運転