juqery 學習之六 CSS–css、位置、寬高

css(name)
訪問第一個匹配元素的樣式屬性。

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

Return a style property on the first matched element.
傳回值
String

參數
name (String) : 要訪問的屬性名稱

樣本
取得第一個段落的color樣式屬性的值。

jQuery 代碼:

$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一個“名/值對”對象設定為所有匹配元素的樣式屬性。
這是一種在所有匹配的元素上設定大量樣式屬性的最佳方式。

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

Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
傳回值
jQuery

參數
properties (Map) : 要設定為樣式屬性的名/值對

樣本
將所有段落的字型顏色設為紅色並且背景為藍色。

jQuery 代碼:

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

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

如果屬性名稱包含 "-"的話，必須使用引號:

jQuery 代碼:

$("p").css({ "margin-left": "10px", "background-color": "blue" });
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中，設定一個樣式屬性的值。
數字將自動轉化為像素值

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

Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
傳回值
jQuery

參數
name (value) : 屬性名稱

value (String, Number) : 屬性值

樣本
將所有段落字型設為紅色

jQuery 代碼:

$("p").css("color","red");
-------------------------------------------------------------------------------------------------------------------------------------------------
offset()
擷取匹配元素在當前視口的相對位移。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。

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

Get the current offset of the first matched element relative to the viewport.
The returned object contains two Integer properties, top and left. The method works only with visible elements.
傳回值
Object{top,left}

樣本
擷取第二段的位移

HTML 程式碼:

<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:

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

<p>Hello</p><p>left: 0, top: 35</p>
-------------------------------------------------------------------------------------------------------------------------------------------------
height()
取得第一個匹配元素當前計算的高度值（px）。
在 jQuery 1.2 以後可以用來擷取 window 和 document 的高

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

Get the current computed, pixel, height of the first matched element.
In jQuery 1.2, this method is able to find the height of the window and document.
傳回值
Integer

樣本
擷取第一段的高

jQuery 代碼:

$("p").height();

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

擷取文檔的高

jQuery 代碼:

$(document).height();
把所有段落的高設為 20:

jQuery 代碼:

$("p").height(20);
-------------------------------------------------------------------------------------------------------------------------------------------------
width()
取得第一個匹配元素當前計算的寬度值（px）。
在 jQuery 1.2 以後可以用來擷取 window 和 document 的寬

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

Get the current computed, pixel, width of the first matched element.
In jQuery 1.2, this method is able to find the width of the window and document.
傳回值
Integer

樣本
擷取第一段的寬

jQuery 代碼:

$("p").width();

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

擷取當前視窗的寬

jQuery 代碼:

$(window).width();
將所有段落的寬設為 20:

jQuery 代碼:

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