jQueryでCSSを操作する

CSSの読み出し

$(～).css("background-color");

例
$(function(){
 alert($("#main").css("background-color"));
});

→指定されているカラーコードがアラートで表示される

CSSの書き込み

$(～).css("background-color","yellow");

例
$(function(){
 $("#main").css("background-color","yellow");
});

→#mainの背景が黄色になる

CSSの追加

$(～).addClass("note");

例
$(function(){
 $("#main").addClass("note");
});

.note {
color:#FF0;
font-weight:bolder;
}

→#mainに.noteが適用される

CSSの削除

$(～).removeClass("note");

CSSを交互に切り替える

$(～).toggleClass("note").toggleClass("caution");

クリックされたらCSSを切り替える

例1
$(function(){
 $("#aButton").click(function(){
  $("#main").toggleClass("note").toggleClass("caution");
 });
});

<input type="button" value="押してください" id="aButton" />

例2
$(function(){
 $("#aButton").click(change);
});

function change(){
 $("#main").toggleClass("note").toggleClass("caution");
}

<input type="button" value="押してください" id="aButton" />