jquery 操作css樣式、位置、尺寸方法總表_jquery

一、CSS

1、css(name)

存取第一個符合元素的樣式屬性。
傳回值 String
參數
name (String) : 要存取的屬性名稱
例：

複製程式碼 程式碼如下:

$("p").css("color"); //取得第一個段落的color樣式屬性的值

2、css(properties)

把一個「名/值對」物件設定為所有符合元素的樣式屬性。這是在所有符合的元素上設定大量樣式屬性的最佳方式。
傳回值 jQuery
參數
properties (Map) : 要設定為樣式屬性的名/值對
例：

複製程式碼 程式碼如下:

//1 將所有段落的字體顏色設為紅色並且背景為藍色
$("p").css({ color: "#ff0011", background: "blue" });
//2 如果屬性名稱包含 "-"的話，必須使用引號
$("p").css({ "margin-left": "10px", "background-color": "blue" });

3、css(name,value)

在所有符合的元素中，設定一個樣式屬性的值。數字將自動轉換為像素值
傳回值 jQuery
參數

name (value) : 屬性名
value (String, Number) : 屬性值
例：

複製程式碼 程式碼如下:

$("p").css("color","re​​d"); //將所有段落字型設為紅色

二、位置

1、offset()

取得符合元素在目前視視窗的相對偏移。傳回的物件包含兩個整形屬性：top 和 left。
注意：此方法只對可見元素有效。
傳回值 Object{top,left}
例：

複製程式碼 程式碼如下:

/*
//取得第二段的偏移量
文件片段：

Hello

2nd Paragraph

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

2、position()

取得匹配元素相對父元素的偏移。
傳回的物件包含兩個整形屬性：top 和 left。若要精確計算結果，請在補白、邊框和填滿屬性上使用像素單位。此方法只對可見元素有效。
傳回值 Object{top,left}
例：

複製程式碼 程式碼如下:

/*
//取得第一段的偏移量
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
var position = p.position();
$("p:last").html("left: " position.left ", top: " position.top);

3、scrollTop()

取得匹配元素相對捲軸頂部的偏移。
注意：此方法對可見和隱藏元素均有效。
傳回值 Integer
例：

複製程式碼 程式碼如下:

/*
//取得第一段相對捲軸頂部的偏移 
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("scrollTop:" p.scrollTop());

4、scrollTop(val)

傳遞參數值時，設定捲軸頂部偏移為該值。此方法對可見和隱藏元素均有效。
傳回值 jQuery
例：

複製程式碼 程式碼如下:

$("div.demo").scrollTop(300);

5、scrollLeft()

取得匹配元素相對捲軸左側的偏移。此方法對可見和隱藏元素均有效。
傳回值 Integer
例：

複製程式碼 程式碼如下:

/*
//取得第一段相對滾動條左側的偏移   
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("scrollLeft:" p.scrollLeft());

6、scrollLeft(val)

傳遞參數值時，設定捲軸左側偏移為該值。此方法對可見和隱藏元素均有效。
傳回值 jQuery
例：

複製程式碼 程式碼如下:

$("div.demo").scrollLeft(300);

三、尺寸

1、height()

取得第一個符合元素目前計算的高度值（px）。在 jQuery 1.2 以後可以用來取得 window 和 document 的高
傳回值 Integer
例：

複製程式碼 程式碼如下:

/*
//取得第一段的高    
文件片段：

Hello

2nd Paragraph

*/
alert($("p").height());
//取得文檔的高
alert($(document).height());

2、height(val)

為每個符合的元素設定CSS高度(hidth)屬性的值。如果沒有明確指定單位（如：em或%），使用px。如果沒有明確指定單位（如：em或%），使用px。
傳回值 jQuery
參數
val (String, Number) : 設定CSS中 'height' 的值
例：

複製程式碼 程式碼如下:

/*
//把所有段落的高設為 20 
文件片段：

Hello

2nd Paragraph

*/
$("p").height(20);
alert($("p").height());

3、width()

取得第一個符合元素目前計算的寬度值（px）。在 jQuery 1.2 以後可以用來取得 window 和 document 的寬
傳回值 Integer
範例：0

複製程式碼 程式碼如下:

/*
//取得第一段的寬
文件片段：

Hello

2nd Paragraph

*/
alert($("p").width());

4、width(val)

為每個符合的元素設定CSS寬度(width)屬性的值。如果沒有明確指定單位（如：em或%），使用px。
傳回值 jQuery
參數
val (String, Number) : 設定 CSS 'width' 的屬性值
例：

複製程式碼 程式碼如下:

/*
//將所有段落的寬設為 20
文件片段：

Hello

2nd Paragraph

*/
$("p").width(20);
alert($("p").width());

5、innerHeight()

取得第一個符合元素內部區域高度（包括補白、不包含邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
例：

複製程式碼 程式碼如下:

/*
//取得第一段落內部區域高度
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("innerHeight:" p.innerHeight());

7、innerWidth()

取得第一個符合元素內部區域寬度（包括補白、不包含邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
例：

複製程式碼 程式碼如下:

/*
//取得第一段落內部區域寬度
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("innerWidth:" p.innerWidth());

7、outerHeight(options)

取得第一個符合元素外部高度（預設包含補白和邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
參數
options(Boolean) : (false)  設定為 true 時，計算邊距在內。
例：

複製程式碼 程式碼如下:

/*
//取得第一段落外部高度
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("outerHeight:" p.outerHeight() " , outerHeight(true):" p.outerHeight(true));

8、outerHeight(options)

取得第一個符合元素外部寬度（預設包含補白和邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
參數
options(Boolean) : (false)   設定為 true 時，計算邊距在內。
例：

複製程式碼 程式碼如下:

/*
//取得第一段落外寬度
文件片段：

Hello

2nd Paragraph

*/
var p = $("p:first");
$("p:last").text("outerWidth:" p.outerWidth() " , outerWidth(true):" p.outerWidth(true));

以上便是jQuery操作CSS樣式、位置、尺寸的全部內容了，純屬是個人總結，如有遺漏或者錯誤，還請大家告之，本文將持續更新。