jQueryを使ったCSS操作：基本から応用まで

ページのスタイルを動的に変更したい場面はよくあります。ユーザーの操作に応じて、あるいはページのロード状況に基づいて、見た目を変更することが求められることが多いです。

基本的なCSS操作
複数のスタイリングを一度に設定
応用：動的スタイリング
クラスの操作
応用例

基本的なCSS操作

jQueryの.css()メソッドを使用すると、要素のスタイルを取得または設定できます。

var color = $("#element").css("color");//要素の色を取得

$("#element").css("background-color", "blue");//要素の背景色を変更

複数のスタイリングを一度に設定

.css()メソッドにオブジェクトを渡すことで、複数のスタイリングを一度に設定できます。

$("#element").css({
    "background-color": "red",
    "font-size": "16px",
    "border": "1px solid black"
});

応用：動的スタイリング

jQueryを使用すると、イベントや条件に基づいて動的にスタイルを変更することが容易になります。

例えば、ボタンがクリックされたときの背景色の変更します。

$("#myButton").click(function(){
    $(this).css("background-color", "green");
});

クラスの操作

addClass()

指定した要素に一つ以上のクラスを追加することができます。

$("#myElement").addClass("highlight");

removeClass()

指定した要素から一つ以上のクラスを削除することができます。

$("#myElement").removeClass("highlight");

toggleClass()

指定した要素のクラスを切り替えることができます。もしクラスが存在すればそれを削除し、存在しなければ追加します。

$("#myElement").toggleClass("highlight");

応用例

マウスホバー時のスタイル変更

マウスカーソルが要素の上に乗ったときや、離れたときにスタイルを変更することができます。

$("#element").hover(
    function() {
        $(this).css("background-color", "yellow");
    }, 
    function() {
        $(this).css("background-color", "white");
    }
);

ウィンドウサイズに応じたスタイル変更

画面のサイズに応じて、要素のスタイルを動的に変更することができます。

$(window).resize(function() {
    if ($(window).width() < 600) {
        $("#element").css("font-size", "12px");
    } else {
        $("#element").css("font-size", "16px");
    }
});

フォームのバリデーション時のスタイル変更

フォーム入力の内容によって、メッセージの色を変更することができます。

$("#submitBtn").click(function() {
    var inputVal = $("#inputField").val();
    if (inputVal === "") {
        $("#message").css("color", "red").text("入力は必須です");
    } else {
        $("#message").css("color", "green").text("送信完了");
    }
});

スクロール位置に応じたヘッダーのスタイル変更

ページをスクロールした位置に応じて、ヘッダーの背景色を変更することができます。

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $("#header").css("background-color", "black");
    } else {
        $("#header").css("background-color", "transparent");
    }
});

アニメーションを利用したスタイリング

jQueryを使って、スタイルの変更を滑らかなアニメーションとともに表示することもできます。

$("#toggleBtn").click(function() {
    $("#box").toggle(1000, function() {
        $(this).css("background-color", "purple");
    });
});

jQueryを活用すれば、さまざまな状況や条件に応じて、CSSをダイナミックに操作することが可能です。

jQuery CSS