最新のWeb開発のチュートリアル
 

jQuery - CSSクラスを取得し、設定します

❮前 次の章❯

jQueryを使って、要素のCSSを操作することは容易です。


jQueryのの操作CSS

jQueryのは、CSSを操作するためのいくつかの方法があります。 私たちは、次の方法を見ていきます。

  • addClass() -選択した要素に1つまたは複数のクラスを追加します。
  • removeClass() -選択した要素から1つまたは複数のクラスを削除します。
  • toggleClass() -選択された要素からクラスを追加/削除を切り替え
  • css() -設定またはstyle属性を返します。

例スタイルシート

次のスタイルシートは、このページのすべての例に使用されます。

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

jQueryのaddClass()メソッド

次の例では、異なる要素にクラス属性を追加する方法を示します。 クラスを追加するときもちろん、複数の要素を選択することができます。

例

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});
»それを自分で試してみてください

また、内の複数のクラスを指定することができますaddClass()メソッド：

例

$("button").click(function(){
    $("#div1").addClass("important blue");
});
»それを自分で試してみてください

jQueryのremoveClass()メソッド

次の例では、異なる要素から特定のクラス属性を削除する方法を示しています。

例

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});
»それを自分で試してみてください

jQueryのtoggleClass()メソッド

次の例では、jQueryの使用方法を示しますtoggleClass()メソッドを。 この方法は、選択した要素からクラスを追加/削除が切り替わります：

例

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});
»それを自分で試してみてください

jQueryのcss()メソッド

jQueryのcss()メソッドは、次の章で説明します。

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4»

jQueryのCSSリファレンス

すべてのjQueryのCSS方法の完全な概要については、当社をご覧くださいjQueryのHTML / CSSリファレンス 。


❮前 次の章❯