サンプルはこちら
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() は特殊な属性値による判別に利用するのが好ましいと思われます。