Juqery Learning 6 CSS -- css、位置、幅、高さ_jquery

css(name)
最初に一致した要素のスタイル プロパティにアクセスします。

------------------------------------------ ------ ------------------------------------

返品最初に一致した要素の style プロパティ。
戻り値
文字列

パラメータ
name (文字列): アクセスする属性の名前

例
最初の段落値の色スタイル属性を取得します。

jQuery コード:

$("p").css("color");
----------------- -------------------------------------------------- -------------------------------------------------- -----------------------------
css(properties)
「名前と値のペア」オブジェクトをすべてに設定します要素の style 属性に一致します。
これは、一致するすべての要素に多数のスタイル属性を設定する最良の方法です。

------------------------------------------ ------ ------------------------------------

設定する
これは、一致したすべての要素に複数のスタイル プロパティを設定する最良の方法です。
戻り値
jQuery

パラメータ
プロパティ。 (マップ): スタイル属性

の名前と値のペアを設定するには、例
は、すべての段落のフォントの色を赤に、背景を青に設定します。

jQuery コード:

$("p").css({ color: "#ff0011"、background: "blue" });

--- -------------------------------------------------- ------------------------

属性名に「-」が含まれる場合は、引用符を使用する必要があります:

jQuery コード:

$("p").css({ "margin-left": "10px", "background-color": "blue" }); -------------------------------------------------- -------------------------------------------------- -- --------------------------------------
css(名前,値)
一致するすべての要素に style 属性の値を設定します。
数値は自動的にピクセル値に変換されます

--------------------------------- -----------------------------------------------

単一のスタイル プロパティを、一致するすべての要素の値に設定します。
数値が指定された場合は、自動的にピクセル値に変換されます。
jQuery

。パラメータ
name (value): 属性名

value (String, Number): 属性値

例
すべての段落フォントを赤色に設定する

jQuery コード:

$("p").css("color","re​​d")
----------- -------------------------------------------------- -------------------------------------------------- - ----------
offset()
現在のビューポート内の一致する要素の相対オフセットを取得します。
返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。このメソッドは、表示されている要素に対してのみ機能します。

------------------------------------------ ------ ------------------------------------

入手
返されたオブジェクトには、top と left の 2 つの整数プロパティが含まれます。
戻り値
Object{top,left}

例
2 番目の段落のオフセットを取得します

HTML コード:


Hello

2 番目の段落

jQueryコード:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " offset.left ", top: " offset.top );
結果:


こんにちは

左: 0、上: 35

----------------------------------------------- --- --------------------------------------------------- ----------------------------------------------------
height()
最初に一致した要素の現在計算されている高さの値 (px) を取得します。
jQuery 1.2 以降では、ウィンドウとドキュメントの高さを取得するために使用できます

---------------------- ---------------------------------------------------- ---- --

最初に一致した要素の現在計算されたピクセルの高さを取得します。
jQuery 1.2 では、このメソッドはウィンドウとドキュメントの高さを見つけることができます。
戻り値
整数

例
最初の段落の高さを取得する

jQuery コード:

$("p").height(); 🎜>
--------------------------------------------- ----- -----------------------------

ドキュメントの高さを取得します

jQuery コード:

$(document).height();
すべての段落の高さを 20 に設定します:

jQuery コード:

$("p" ).height( 20); ---------- -------------------------------------- ---------- -------------------------------------- ---------- -
width()
最初に一致した要素の現在計算されている幅の値 (px) を取得します。
jQuery 1.2 以降では、ウィンドウとドキュメントの幅を取得するために使用できます

---------------------- ---------------------------------------------------- ---- --

最初に一致した要素の現在計算されたピクセルの幅を取得します。
jQuery 1.2 では、このメソッドはウィンドウとドキュメントの幅を見つけることができます。
戻り値
整数

例
最初の段落の幅を取得します

jQuery コード:

$("p").width(); 🎜>
--------------------------------------------- ----- -----------------------------

現在のウィンドウの幅を取得します

jQuery コード:

$(window).width();
すべての段落の幅を 20 に設定します:

jQuery コード:

$("p").width (20);