jQuery入門

トップ > jQuery > CSS

CSS

obj.css(propertyName) (1.0)
obj.css(propertyName, value) (1.0)
obj.css(properties) (1.0)
obj.css(propertyName, function(index, value)) (1.4)

.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";
});
obj.height() (1.0)
obj.height(value) (1.0)
obj.height(function(index, height)) (1.4.1)
obj.width() (1.0)
obj.width(value) (1.0)
obj.width(function(index, width)) (1.4.1)
obj.innerHeight() (1.2.6)
obj.innerWidth() (1.2.6)
obj.outerHeight([includeMargin]) (1.2.6)
obj.outerWidth([includeMargin]) (1.2.6)

.height(), .width() はパディングも含まない高さ・横幅、.innerHeight(), .innerWidth() はパディングを含む高さ・横幅、.outerHeight(), outerWidth() はボーダーを含む高さ・横幅、.outerHeight(true), .outerWidth(false) はさらにマージンを含む高さ・横幅を取得します。

margin
border
padding
element
 
 
 
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(...)) の形式は、高さ・横幅を valuefunction() の戻り値に設定します。

$("#d1").height(300);
obj.offset() (1.2)
obj.offset(coordinates) (1.4)
obj.offset(function(index, coords)) (1.4)

.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.position() (1.2)

obj の親要素からの相対位置を取得します。

val = $("#d1").position();
alert(val.top + "," + val.left);            // 100,100
obj.scrollTop() (1.2.6)
obj.scrollTop(value) (1.2.6)
obj.scrollLeft() (1.2.6)
obj.scrollLeft(value) (1.2.6)

obj の縦方向、横方向のスクロール位置を取得・設定します。

val = $("#d1").scrollTop();      // 50
$("#d1").scrollTop(100);
val = $("#d1").scrollLeft();     // 50
$("#d1").scrollLeft(100);
◆ $.cssHooks (1.4.3)

新しい 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");

Copyright (C) 2013 杜甫々
初版:2013年2月3日
http://www.tohoho-web.com/js/jquery/css.htm