.css(propertyName) の形式は obj のスタイルを参照します。

color = $("#d1").css("color");

.css(propertyNames) の形式は obj の複数のスタイルを参照します。

props = $("#d1").css(["width", "height"]);

.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");

単位無しで使用可能なCSSプロパティを持つオブジェクトです。css() はこのオブジェクトを利用して、単位無しの値に 'px' を付与するか否かを決めます。CSSプロパティには、zIndex, fontWeight, opacity, zoom, lineHeight, widows(1.6-), orphans(1.6-), fillOpacity(1.6.2-), columnCount(1.9-), order(1.10.2-), flexGlow(1.11.1), flexShrink(1.11.1-) が含まれます。

$.cssHooks.zIndex = false;

CSSのセレクタとして意味のある文字を無効化します。例えば、id="test.open" とした場合、$("#test.open") とすると、id="test" class="open" の要素を探してしまい、うまくマッチしません。これを、下記の様にすることでマッチできるようにします。

$('#' + $.escapeSelector('test.open')).css('background-color', 'blue');