jQuery - CSS クラスの取得と設定

jQuery を使用すれば、要素の CSS 操作が簡単です。

jQuery CSS の操作

jQuery には、CSS を操作するためのメソッドが幾つかあります。次のメソッドを見ていきます：

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

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

.blue {
    color: blue;
}

次の例は、いろいろな要素へ class 属性を追加する方法を示しています。勿論、class を追加するときには、複数の要素を選択することができます：

$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});

addClass() メソッド内で複数の要素を指定することもできます：

$("button").click(function(){
$("#div1").addClass("important blue");
});

次の例は、いろいろな要素から、指定の class 属性を削除する方法を示しています：

$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});

次の例は、jQuery toggleClass() メソッドの使用方法を示しています。このメソッドは、選択した要素に対するクラスの追加/削除をトグルします：

$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});

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

すべての jQuery CSS メソッドの完全な概要については、jQuery HTML/CSS リファレンスをご覧ください。