.css(propertyName) の形式は obj のスタイルを参照します。
var = $("#d1").css("color"));
.css(propertyName, value) の形式は obj のスタイルを設定します。
$("#d1").css("color", "red");
.css(properties) の形式は下記の記法で obj のスタイルを設定します。
$("#d1").attr({ color: "red", border: "1px solid gray" });
.css(propertyName, function(...)) の形式は関数の戻り値を propertyNameスタイルに設定します。
$("#d1").css("color", function(i, val) { return "red"; });
.height(), .width() はパディングも含まない高さ・横幅、.innerHeight(), .innerWidth() はパディングを含む高さ・横幅、.outerHeight(), outerWidth() はボーダーを含む高さ・横幅、.outerHeight(true), .outerWidth(false) はさらにマージンを含む高さ・横幅を取得します。
val = $("#d1").height(); // 100 val = $("#d1").innerHeight(); // 120 val = $("#d1").outerHeight(); // 140 val = $("#d1").outerHeight(true); // 160
<div id="d1" style="width:100px; height:100px; padding:10px; border: 10px solid gray; margin: 10px;"></div>
.height(value) や .height(function(...)) の形式は、高さ・横幅を value や function() の戻り値に設定します。
$("#d1").height(300);
.offset() の形式は、obj の画面上の縦位置、横位置を取得します。
val = $("#d1").offset();
alert(val.top + "," + val.left); // 100,100
.offset(coordinates) の形式は、obj の画面上の縦位置、横位置を設定します。
$("#d1").offset({ top: 100, left: 100 });
.offset(function(...)) の形式は、obj の画面上の縦位置、横位置を関数の戻り値に設定します。
$("#d1").offset(function() { return { top: 100, left: 100 }; });;
obj の親要素からの相対位置を取得します。
val = $("#d1").position();
alert(val.top + "," + val.left); // 100,100
obj の縦方向、横方向のスクロール位置を取得・設定します。
val = $("#d1").scrollTop(); // 50 $("#d1").scrollTop(100); val = $("#d1").scrollLeft(); // 50 $("#d1").scrollLeft(100);
新しい CSSプロパティを定義します。下記の例では、width と height を一度に設定する widthHeight という新しい CSSプロパティを定義しています。
$.cssHooks["widthHeight"] = { get: function(elem, computed, extra) { return $(elem).css("width"); }, set: function(elem, value) { $(elem).css({ width: value, height: value }); } }; $("div#d1").css("widthHeight", "300px");