jQueryのCSS操作

jQueryの非常に重要な部分はDOMを操作する可能性です。

jQueryは要素のスタイルを操作するための効果的な方法を提供します。

この章では、DOMにCSSクラスを追加または削除する方法を説明します。

jQueryのCSS操作

jQueryを使用すると、要素のスタイルを簡単に操作できます。

以下に、CSS操作に使用するjQueryメソッドがあります：

• addClass()

• removeClass()

• toggleClass()

• css()

それぞれのメソッドの使用方法を説明します。

jQuery addClass()メソッド

jQuery addClass()一つまたは複数のクラス名を要素に追加する方法です。

以下の例では、最初の<p>要素にクラス名を追加します：

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

一度に複数のクラス（スペース区切り）を要素に追加できます。以下のようになります：

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

jQuery removeClass()メソッド

jQuery removeClass()クラス名を一つまたは複数削除する方法です。

以下の例では、すべての<p>要素からクラス名を削除します：

$("button").click(function(){
　　$("p").removeClass("highlight");
});

一度に複数のクラス（スペース区切り）を削除できます。以下のようになります：

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

パラメータにクラス名が指定されていない場合、すべてのクラスを削除します：

$("button").click(function(){
　　$("p").removeClass();
});

jQueryのtoggleClass()メソッド

jQuery toggleClass()メソッドは追加/選択された要素から1つまたは複数のクラス名を削除する間で切り替えます。

以下のサンプルは、すべての<p>要素に「anotherClass」クラス名を追加および削除する間で切り替えます：

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

このメソッドは、各要素の指定されたクラス名をチェックします：

• クラス名が欠けている場合、それを追加します。

• 既にクラス名が設定されている場合、それを削除します。

jQueryのcss()メソッド

jQuery css()メソッドは、選択された要素の1つまたは複数のスタイル属性を取得または設定します。

jQuery css()方法は次の章で説明します。

jQueryのCSSリファレンス

完全なCSSメソッドのリファレンスについては、私たちのjQueryのHTML / CSSリファレンス。