Latest web development tutorials

jQueryの取得とCSSクラスを設定します

jQueryをすることで、容易にCSS要素上で動作することができます。


jQueryのCSSの操作

jQueryのは、CSSの操作のいくつかの方法があります。 私たちは次のことを学習します。

  • addClass() - 選択された要素に1つ以上のカテゴリを追加
  • removeClass() - クラスから選択される一つ以上の要素を削除
  • toggleClass() - 追加/削除クラススイッチ操作で選択した要素の
  • CSS() - 設定または戻りスタイル属性

スタイルシートの例

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

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

.blue
{
color:blue;
}


jQueryのaddClass()メソッド

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

$("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()メソッドを説明します。