jQuery_jqueryを使用して要素スタイルを設定する使用例

この記事の例では、jQuery を使用して要素のスタイルを設定する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

CSS はページの一部であり、jQuery には CSS に関連する実用的なメソッドもいくつか用意されています。前回の記事では、要素に CSS スタイルを追加するために addClass() を使用しました。ここではjQueryがページのスタイルを設定する仕組みを中心に紹介します。追加、削除、動的切り替えなどが含まれます。

1. CSS カテゴリを追加および削除します。

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

$(function() {
//複数の CSS カテゴリを同時に追加します
$("img").addClass("css1 css2");
});

たとえば、上記のコードは 2 つのスタイル css1 と css2 を img 要素 に追加します。

removeClass は addClass メソッドに対応するため、ここでは例を繰り返しません。

2. カテゴリを動的に切り替えます。

ユーザーの操作ステータスに応じて、一部の要素のスタイルを特定のカテゴリ、場合によっては addClass() カテゴリ、場合によってはremoveClass() カテゴリの間で切り替えたいことがよくあります。Jq はこれを行うための直接 toggleClass(name) を提供します。同様の操作。

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

$(function() {
$("p").click(function() {
$(this).toggleClass("css1");
})
});

上記のコードは、P 要素をクリックしたときに css1 スタイルを連続的に切り替えることを実装しています。 toggleClass(name) メソッドは、CSS カテゴリを 1 つだけ設定できます。複数のCSSを切り替えることはできません。

3. スタイルを直接取得して設定します。

attr() メソッドとまったく同様に、jQuery は要素のスタイルを直接取得および設定するための css() メソッドを提供します。たとえば、css(name) を使用して特定のスタイルのスタイル値を取得します。 CSS (プロパティ) リストを使用して複数のスタイルを同時に設定し、CSS (名前、値) を使用して要素の特定のスタイルを設定します。

例: css(name,value) をトリガーするようにマウスオーバー イベントとマウスアウト イベントを設定して、カラー マークを変更します。

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

$(function() {
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("カラー", "黒");
});
});

css メソッドは不透明度属性を提供します。そしてさまざまなブラウザと互換性があります。

上記の例を変更し、マウス イベントを通じて p 要素の透明度の値を設定します。

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

$(function() {
$("p").mouseover(function() {
$(this).css("不透明度", "0.5");
});
$("p").mouseout(function() {
$(this).css("不透明度", "1");
});
});

さらに、要素に特定の CSS カテゴリ セットがあるかどうかを判断するための hasClass(name) メソッドが CSS に提供されています。ブール値を返します。例:

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

$("li:last").hasClass("css1")

最後の li の css 属性に css1 クラスが含まれるかどうかを表します。そして

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

$("li:last").is(".css1" )

このコードの効果はまったく同じです。

jQueryのソースコードを見ると、hasClassメソッドはis()メソッドです。

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

hasClass: function(selector) {
return this.is("." セレクター);
}

この記事が皆さんの jQuery プログラミングに役立つことを願っています。