【jQuery使用手冊】六：CSS

　　　　六：CSS

　　　　css(name)　　　　傳回值：String

　　　　 訪問第一個匹配元素的樣式屬性。樣本：取得第一個段落的color元素屬性的值。　　　　

1 jQuery代碼：
2         $("p").css("color");

 　　　　css(properties)　　　　傳回值：jQuery

　　　　 把一個“名/值對”對象設定為所有匹配元素的樣式屬性。這是一中在所有匹配元素上設定大批量樣式的最佳方式。樣本：將所有段落的字型顏色設為紅色並且背景色為藍色。　　　　

1 jQuery代碼：
2         $("p").css({color:"#ff0011",background:"blue"});

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

1 jQuery代碼：
2         $("p").css({"margin-left":"10px","background-color":"blue"});

 　　　　css(name,value)　　　　傳回值：jQuery

　　　　 在所有匹配元素中，設定一個樣式屬性的值。數字將自動轉換為像素值。樣本：將所有段落字型設定為紅色。             

1 jQuery代碼：
2         $("p").css("color","red");

 　　　　css(name,function(index,value))　　　　傳回值：jQuery

　　　　 在所有匹配的元素中，設定一個樣式屬性的值。數字將自動轉換為像素值。樣本：逐漸增加div的大小。　　　　

代碼

 1 jQuery代碼：
 2         $("div").click(function(){
 3            $(this) .css({
 4              width:function(index,value){
 5                     return parseFloat(value)*1.2;
 6                 },
 7              height:function(index,value){
 8                     return parseFloat(value)*1.2;
 9                 }
10            });
11        });

 　　　　offset()　　　　傳回值：Object{top,left}

　　　　 擷取匹配元素在當前視窗的相對位移。返回的對象包含兩個整型的屬性：top和left，此方法只對可見元素有效。樣本：擷取位移。

1 HTML代碼：
2        <p>Hello</p><p>2nd Paragraph</p>
3 jQuery代碼：
4        var p=$("p:last");
5        var offset=p.offset();
6        p.html("left:"+offset.left+",top:"+offset.top);7　結果：8        <p>Hello</p><p>left:0,top:35</p>

 　　　　offset(coordinates)　　　　傳回值：jQuery

　　　　 設定匹配元素相對於document對象的座標。.offset()方法可以重新設定元素的位置。這個元素的位置是相對於document對象的。如果原先的position樣式屬性是static的話，會被改成relative來實現重定位。樣本：設定第二段的位移。　　　　

1 HTML代碼：
2        <p>Hello</p><p>2nd Paragraph</p>
3 jQuery代碼;
4        $("p:last").offset({top:10,left:30});

 　　　　position()　　　　傳回值：Object{top,left}

　　　　 擷取匹配元素相對父元素的位移。傳回值包括兩個屬性：top和left。為精確計算結果，在補白、邊框和填充上請使用像素單位。此方法只對可見元素有效。

代碼

1 HTML代碼：
2        <p>Hello</p><p>2nd Paragraph</p>
3 jQuery代碼；
4        var p=$("p:first");
5       var position=p.position();
6       $("p:last")hitml("left:"+position.left+",top:"+position.top);
7 結果：
8        <p>Hello</p><p>left:15,top:15</p>

 　　　　scrollTop()　　　　傳回值：Integer

　　　　  擷取匹配元素相對捲軸頂部的位移。此方法對可見和隱藏元素均有效。樣本：擷取第一個段落對於捲軸頂部的位移。

1 HTML代碼：
2         <p>Hello</p><p>2nd Paragraph</p>
3 jQuery代碼：
4         var p=$("p:first");
5        $("p:last").text("scrollTop:"+p.scrollTop());
6 結果：
7         <p>Hello</p><p>scrollTop:0</p>

　　　　scrollTop(val)　　　　　傳回值：jQuery

　　　　 傳遞參數值時，設定垂直捲軸頂部位移為該值。此方法對可見和隱藏元素均有效。樣本：設定相對捲軸頂部的位移。

1 jQuery代碼：
2        $("div.demo").scrollTop(300); 

　　　　scrollLeft()　　　　傳回值：integer

　　　　擷取匹配元素相對捲軸左側的位移。此方法對可見和隱藏元素均有效。

　　　　scrollLeft(val)　　　　　傳回值：jQuery

　　　　傳遞參數時，設定水平捲軸左側位移為改值。此方法對可見和隱藏元素均有效。

　　　　height()　　　　傳回值：Integer

　　　　取得第一個匹配元素當前計算的高度值(px)。在jQuery1.2以後可以用來擷取window和doucument的高。

　　　　樣本：擷取第一段的高。

1 jQuery代碼：
2         $("p").height();

 　　　　樣本：擷取當前瀏覽器視窗的高度。

1 jQuery代碼：
2         $(window).height();

 　　　　樣本：擷取當前HTML文檔高度。

1 jQuery代碼：
2         $(document).height();

 　　　　height(val)　　　　傳回值：jQuery

　　　　為每個匹配的元素設定CSS高度屬性的值。如果沒有明確知道單位(如em或%)，使用px。參數val類型：String,Number,Function。

　　　　樣本：把所有段落高度設為20。

1 jQuery代碼：
2         $("p").height(20);

 　　　　width()　　　　傳回值：Integer

　　　　取得第一個匹配元素當前計算的寬度值(px)。在jQuery1.2之後可以用來擷取window和document的寬。樣本參見height()。

　　　　width(val)　　　　傳回值：jQuery

　　　　為每個匹配元素設定CSS寬度(width)屬性的值。如果沒有明確指定單位，則使用px。樣本參見height(val)。

　　　　innerHeight()　　　　傳回值：Integer

　　　　擷取第一個匹配元素內部地區高度(包括補白、不包括邊框)。此方法對可見和隱藏元素均有效。

　　　　innerWidth()　　　　傳回值：Integer

　　　　擷取第一個匹配元素內部地區寬度(包括補白、不包括邊框)。此方法對可見和隱藏元素均有效。

　　　　outerHeight(options)　　　　傳回值：Integer

　　　　擷取第一個匹配元素外部高度(預設包括補白和邊框)。若options為true，則計算邊距在內。

　　　　outerWidth(options)　　　　傳回值：Integer

　　　　擷取第一個匹配元素外部寬度(預設包括補白和邊框)。若options為true，則計算邊距在內。