jQuery

css操作

1)css
2）位置
3）尺寸

1.css操作之css

css(name|pro|[,val|fn])   
當你使用CSS屬性在css()或animate()中，我們將根據瀏覽器自動加上首碼(在適當的時候)，在Chrome/Safari瀏覽器中我們將設置為"-webkit-user-select", Firefox會使用"-moz-user-select", IE10將使用"-ms-user-select".

2.css操作之位置

（1）offset([coordinates])

返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。
coordinates{top,left}
必需。規定以像素計的 top 和 left 坐標。
可能的值：
值對，比如 {top:100,left:0} 
帶有 top 和 left 屬性的對象

（2）position()

獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整型屬性：top 和 left。
例如：
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
結果:
<p>Hello</p><p>scrollTop: 0</p>

（3）scrollTop([val])

獲取匹配元素相對滾動條頂部的偏移。
val：設定垂直滾動條值
例如：
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
結果:
<p>Hello</p><p>scrollTop: 0</p>。

（4）scrollLeft([val])

獲取匹配元素相對滾動條左側的偏移。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
結果:
<p>Hello</p><p>scrollLeft: 0</p>

3.css操作之尺寸

（1）height([val|fn])

取得匹配元素當前計算的高度值（px）。
val
設定CSS中 'height' 的值，可以是字元串或者數字，還可以是一個函數，返回要設置的數值。函數接受兩個參數，第一個參數是元素在原先集合中的索引位置，第二個參數為原先的高度。

（2）width([val|fn])

取得第一個匹配元素當前計算的寬度值（px）。
val
設定CSS中 'width' 的值，可以是字元串或者數字，還可以是一個函數，返回要設置的數值。函數接受兩個參數，第一個參數是元素在原先集合中的索引位置，第二個參數為原先的寬度。

（3）innerHeight()

獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。
例如：
獲取第一段落內部區域高度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
結果:
<p>Hello</p><p>innerHeight: 16</p>

（4）innerWidth()

獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。
例如：
獲取第一段落內部區域寬度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
結果:
<p>Hello</p><p>innerWidth: 40</p>

（5）outerHeight([options])

獲取第一個匹配元素外部高度（預設包括補白和邊框）。
例如：
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
結果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

（6）outerWidth([options])

獲取第一個匹配元素外部寬度（預設包括補白和邊框）。
例如：
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
結果:
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>