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)

在所有比對的元素中，設定一個樣式屬性的值。數字将自動轉化為像素值

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。為精确計算結果，請在補白、邊框和填充屬性上使用像素機關。此方法隻對可見元素有效。

//擷取第一段的偏移 

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

var position = p.position();

$("p:last").html("left: " + position.left + ", top: " + position.top); 

3、scrollTop()

擷取比對元素相對滾動條頂部的偏移。

注意：此方法對可見和隐藏元素均有效。

傳回值 Integer

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

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

4、scrollTop(val)

傳遞參數值時，設定滾動條頂部偏移為該值。此方法對可見和隐藏元素均有效。

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

5、scrollLeft()

擷取比對元素相對滾動條左側的偏移。此方法對可見和隐藏元素均有效。

//擷取第一段相對滾動條左側的偏移    

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

6、scrollLeft(val)

傳遞參數值時，設定滾動條左側偏移為該值。此方法對可見和隐藏元素均有效。

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

三、尺寸

1、height()

取得第一個比對元素目前計算的高度值（px）。在 jQuery 1.2 以後可以用來擷取 window 和 document 的高

//擷取第一段的高     

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

//擷取文檔的高 

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

2、height(val)

為每個比對的元素設定CSS高度(hidth)屬性的值。如果沒有明确指定機關（如：em或%），使用px。如果沒有明确指定機關（如：em或%），使用px。

val (String, Number) : 設定CSS中 'height' 的值

//把所有段落的高設為 20  

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

3、width()

取得第一個比對元素目前計算的寬度值（px）。在 jQuery 1.2 以後可以用來擷取 window 和 document 的寬

示例：0

//擷取第一段的寬 

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

4、width(val)

為每個比對的元素設定CSS寬度(width)屬性的值。如果沒有明确指定機關（如：em或%），使用px。

val (String, Number) : 設定 CSS 'width' 的屬性值

//将所有段落的寬設為 20 

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

5、innerHeight()

擷取第一個比對元素内部區域高度（包括補白、不包括邊框）。此方法對可見和隐藏元素均有效。

//擷取第一段落内部區域高度 

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

7、innerWidth()

擷取第一個比對元素内部區域寬度（包括補白、不包括邊框）。此方法對可見和隐藏元素均有效。

//擷取第一段落内部區域寬度

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

7、outerHeight(options)

擷取第一個比對元素外部高度（預設包括補白和邊框）。此方法對可見和隐藏元素均有效。

options(Boolean) : (false)  設定為 true 時，計算邊距在内。

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

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

8、outerHeight(options)

擷取第一個比對元素外部寬度（預設包括補白和邊框）。此方法對可見和隐藏元素均有效。

options(Boolean) : (false)   設定為 true 時，計算邊距在内。

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

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

本文轉自JeffWong部落格園部落格，原文連結：http://www.cnblogs.com/jeffwongishandsome/archive/2009/11/01/1549555.html，如需轉載請自行聯系原作者