とほほのjQuery入門

トップ > jQuery > CSS

CSS

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

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

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

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

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

.css(propertyName, value) の形式は obj のスタイルを設定します。

JavaScript
$("#d1").css("color", "red");

.css(properties) の形式は下記の記法で obj のスタイルを設定します。

JavaScript
$("#d1").attr({
    color: "red",
    border: "1px solid gray"
});

.css(propertyName, function(...)) の形式は関数の戻り値を propertyNameスタイルに設定します。

JavaScript
$("#d1").css("color", function(i, val) {
    return "red";
});
obj.height() (1.0)
obj.height(value) (1.0)
obj.height(function(index, currentHeight)) (1.4.1)
obj.width() (1.0)
obj.width(value) (1.0)
obj.width(function(index, currentWidth)) (1.4.1)
obj.innerHeight() (1.2.6)
obj.innerHeight(value) (1.8)
obj.innerHeight(function(index, currentHeight)) (1.8)
obj.innerWidth() (1.2.6)
obj.innerWidth(value) (1.8)
obj.innerWidth(function(index, currentWidth)) (1.8)
obj.outerHeight([includeMargin]) (1.2.6)
obj.outerHeight(value) (1.8)
obj.outerHeight(function(index, currentWidth)) (1.8)
obj.outerWidth([includeMargin]) (1.2.6)
obj.outerWidth(value) (1.8)
obj.outerWidth(function(index, currentWidth)) (1.8)

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

margin
border
padding
element
 
 
 
JavaScript
val = $("#d1").height();             // 100
val = $("#d1").innerHeight();        // 120
val = $("#d1").outerHeight();        // 140
val = $("#d1").outerHeight(true);    // 160
JavaScript
<div id="d1" style="width:100px; height:100px; padding:10px; border: 10px solid gray; margin: 10px;"></div>

.height(value) や .height(function(...)) の形式は、高さ・横幅を valuefunction() の戻り値に設定します。

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

.offset() の形式は、obj の画面上の縦位置、横位置を取得します。

JavaScript
val = $("#d1").offset();
alert(val.top + "," + val.left);            // 100,100

.offset(coordinates) の形式は、obj の画面上の縦位置、横位置を設定します。

JavaScript
$("#d1").offset({ top: 100, left: 100 });

.offset(function(...)) の形式は、obj の画面上の縦位置、横位置を関数の戻り値に設定します。

JavaScript
$("#d1").offset(function() {
    return { top: 100, left: 100 };
});;
obj.position() (1.2)

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

JavaScript
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 の縦方向、横方向のスクロール位置を取得・設定します。

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

新しい CSSプロパティを定義します。下記の例では、width と height を一度に設定する widthHeight という新しい CSSプロパティを定義しています。

JavaScript
$.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");
◆ $.cssNumber (1.4.3)

単位無しで使用可能な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-) が含まれます。

JavaScript
$.cssHooks.zIndex = false;
◆ $.escapeSelector(selector) (3.0)

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

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

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