//1 將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色 

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

//2 如果屬性名包含 "-"的話，必須使用引號 

$("p").css({ "margin-left": "10px", "background-color": "blue" });

3、css(name,value)

在所有匹配的元素中，設(shè)置一個(gè)樣式屬性的值。數(shù)字將自動轉(zhuǎn)化為像素值
返回值 jQuery
參數(shù)

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

復(fù)制代碼代碼如下:

$("p").css("color","red"); //將所有段落字體設(shè)為紅色

二、位置

1、offset()

獲取匹配元素在當(dāng)前視窗口的相對偏移。返回的對象包含兩個(gè)整形屬性：top 和 left。
注意：此方法只對可見元素有效。
返回值 Object{top,left}
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第二段的偏移 

文檔片段：<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()

獲取匹配元素相對父元素的偏移。
返回的對象包含兩個(gè)整形屬性：top 和 left。為精確計(jì)算結(jié)果，請?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
返回值 Object{top,left}
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段的偏移 

文檔片段：<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
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段相對滾動條頂部的偏移  

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("scrollTop:" + p.scrollTop());

4、scrollTop(val)

傳遞參數(shù)值時(shí)，設(shè)置滾動條頂部偏移為該值。此方法對可見和隱藏元素均有效。
返回值 jQuery
示例：

復(fù)制代碼代碼如下:

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

5、scrollLeft()

獲取匹配元素相對滾動條左側(cè)的偏移。此方法對可見和隱藏元素均有效。
返回值 Integer
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段相對滾動條左側(cè)的偏移    

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("scrollLeft:" + p.scrollLeft());

6、scrollLeft(val)

傳遞參數(shù)值時(shí)，設(shè)置滾動條左側(cè)偏移為該值。此方法對可見和隱藏元素均有效。
返回值 jQuery
示例：

復(fù)制代碼代碼如下:

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

三、尺寸

1、height()

取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值（px）。在 jQuery 1.2 以后可以用來獲取 window 和 document 的高
返回值 Integer
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段的高     

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

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

//獲取文檔的高 

alert($(document).height());

2、height(val)

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

復(fù)制代碼代碼如下:

/* 

//把所有段落的高設(shè)為 20  

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

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

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

3、width()

取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值（px）。在 jQuery 1.2 以后可以用來獲取 window 和 document 的寬
返回值 Integer
示例：0

復(fù)制代碼代碼如下:

/* 

//獲取第一段的寬 

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

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

4、width(val)

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

復(fù)制代碼代碼如下:

/* 

//將所有段落的寬設(shè)為 20 

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

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

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

5、innerHeight()

獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度（包括補(bǔ)白、不包括邊框）。此方法對可見和隱藏元素均有效。
返回值 Integer
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段落內(nèi)部區(qū)域高度 

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("innerHeight:" + p.innerHeight());

7、innerWidth()

獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框）。此方法對可見和隱藏元素均有效。
返回值 Integer
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段落內(nèi)部區(qū)域?qū)挾?

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("innerWidth:" + p.innerWidth());

7、outerHeight(options)

獲取第一個(gè)匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）。此方法對可見和隱藏元素均有效。
返回值 Integer
參數(shù)
options(Boolean) : (false) 設(shè)置為 true 時(shí)，計(jì)算邊距在內(nèi)。
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段落外部高度 

文檔片段：<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)

獲取第一個(gè)匹配元素外部寬度（默認(rèn)包括補(bǔ)白和邊框）。此方法對可見和隱藏元素均有效。
返回值 Integer
參數(shù)
options(Boolean) : (false) 設(shè)置為 true 時(shí)，計(jì)算邊距在內(nèi)。
示例：

復(fù)制代碼代碼如下:

/* 

//獲取第一段落外部寬度 

文檔片段：<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true));

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

您可能感興趣的文章: