jQuery學習筆記：CSS

一、 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","red"); //將所有段落字型設為紅色
二、位置
1、offset()
擷取匹配元素在當前視視窗的相對位移。返回的對象包含兩個整形屬性：top 和 left。
注意：此方法只對可見元素有效。
傳回值 Object{top,left}
樣本：

/*
//擷取第二段的位移
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:last");
var offset = p.offset();
p.html("left: " + offset.left + ", top: " + offset.top); 

2、position()
擷取匹配元素相對父元素的位移。
返回的對象包含兩個整形屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
傳回值 Object{top,left}
樣本：

/*
//擷取第一段的位移 
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:first");
var position = p.position();
$("p:last").html("left: " + position.left + ", top: " + position.top); 

3、scrollTop()
擷取匹配元素相對捲軸頂部的位移。
注意：此方法對可見和隱藏元素均有效。
傳回值 Integer
樣本：

/*
//擷取第一段相對捲軸頂部的位移  
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:first");
$("p:last").text("scrollTop:" + p.scrollTop()); 

4、scrollTop(val)
傳遞參數值時，設定捲軸頂部位移為該值。此方法對可見和隱藏元素均有效。
傳回值 jQuery
樣本：
$("div.demo").scrollTop(300);
5、scrollLeft()
擷取匹配元素相對捲軸左側的位移。此方法對可見和隱藏元素均有效。
傳回值 Integer
樣本：

/*
//擷取第一段相對捲軸左側的位移    
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/

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
樣本：

/*
//擷取第一段的高     
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
alert($("p").height());

//擷取文檔的高 
alert($(document).height()); 

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

/*
//把所有段落的高設為 20  
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
$("p").height(20); 

alert($("p").height());

3、width()
取得第一個匹配元素當前計算的寬度值（px）。在 jQuery 1.2 以後可以用來擷取 window 和 document 的寬
傳回值 Integer
樣本：0

/*
//擷取第一段的寬 
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/

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

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

/*
//將所有段落的寬設為 20 
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
$("p").width(20);
alert($("p").width());

5、innerHeight()
擷取第一個匹配元素內部地區高度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
樣本：

/*
//擷取第一段落內部地區高度 
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:first");
$("p:last").text("innerHeight:" + p.innerHeight()); 

7、innerWidth()
擷取第一個匹配元素內部地區寬度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
樣本：

/*
//擷取第一段落內部地區寬度
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:first");
$("p:last").text("innerWidth:" + p.innerWidth()); 

7、outerHeight(options)
擷取第一個匹配元素外部高度（預設包括補白和邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
參數
options(Boolean) : (false)  設定為 true 時，計算邊距在內。
樣本：

/*
//擷取第一段落外部高度
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:first");
$("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true)); 

8、outerHeight(options)
擷取第一個匹配元素外部寬度（預設包括補白和邊框）。此方法對可見和隱藏元素均有效。
傳回值 Integer
參數
options(Boolean) : (false)   設定為 true 時，計算邊距在內。
樣本：

/*
//擷取第一段落外部寬度
文檔片段：<p>Hello</p><p>2nd Paragraph</p> 
*/
var p = $("p:first");
$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true));