jQuery利用例：CSSの取得と操作

サンプルはこちら
http://jsdo.it/goto_jp/acoR

今回は内部的なデータの取り扱いの話になりますが、JavaScriptを使うことでCSSを切り替える方法はいくつかあります。そのための例を上記サンプルに掲載していますがコードは下記になります。

結論から言ってしまうと、jQueryによるCSS操作は css() を使うか toggleClass() などでクラスを付与して操作するのが正解です。

JavaScript

$(function(){

    //boxのstyle属性をアラート表示
    $(".viewCss").click(function(){
        alert($(".box").css("background-color"));
    });

    //boxのstyle属性をアラート表示
    $(".viewAttr").click(function(){
        alert($(".box").attr("style"));
    });

    //boxの背景色を操作
    $("#colorSubmit").click(function(){
        $(".box").css("background-color",$("#color").val());
    });

});

「box」の背景色を指定しているCSSを、「css()」と「attr()」の2種類の関数を使って抜き出しています。

attr() は対象のHTMLに直接記述されている style 属性の値を抜き出すだけなので、記述されているものしか抜き出すこともできません。

attr() は特殊な属性値による判別に利用するのが好ましいと思われます。