jquery 控制css樣式

2021-06-27 12:26:01 字數 4545 閱讀 9704

一、css 

1、css(name) 

訪問第乙個匹配元素的樣式屬性。 

返回值 string 

引數 name (string) : 要訪問的屬性名稱 

示例: 

$("p").css("color"); //取得第乙個段落的color樣式屬性的值 

2、css(properties) 

把乙個「名/值對」物件設定為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設定大量樣式屬性的最佳方式。 

返回值 jquery 

引數 properties (map) : 要設定為樣式屬性的名/值對 

示例: 

//1 將所有段落的字型顏色設為紅色並且背景為藍色 

$("p").css(); 

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

$("p").css(); 

3、css(name,value) 

在所有匹配的元素中,設定乙個樣式屬性的值。數字將自動轉化為畫素值 

返回值 jquery 

引數 name (value) : 屬性名 

value (string, number) : 屬性值 

示例: 

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

二、位置 

1、offset() 

獲取匹配元素在當前視視窗的相對偏移。返回的物件包含兩個整形屬性:top 和 left。 

注意:此方法只對可見元素有效。 

返回值 object 

示例: 

/* //獲取第二段的偏移 

文件片段:hello

2nd paragraph

*/ var p = $("p:last"); 

var offset = p.offset(); 

p.html("left: " + offset.left + ", top: " + offset.top); 

2、position() 

獲取匹配元素相對父元素的偏移。 

返回的物件包含兩個整形屬性:top 和 left。為精確計算結果,請在補白、邊框和填充屬性上使用畫素單位。此方法只對可見元素有效。 

返回值 object 

示例: 

/* //獲取第一段的偏移 

文件片段:hello

2nd paragraph

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

var position = p.position(); 

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

3、scrolltop() 

獲取匹配元素相對滾動條頂部的偏移。 

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

返回值 integer 

示例: 

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

文件片段:hello

2nd paragraph

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

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

4、scrolltop(val) 

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

返回值 jquery 

示例: 

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

5、scrollleft() 

獲取匹配元素相對滾動條左側的偏移。此方法對可見和隱藏元素均有效。 

返回值 integer 

示例: 

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

文件片段:hello

2nd paragraph

*/ 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 

示例: 

/* //獲取第一段的高     

文件片段:hello

2nd paragraph

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

//獲取文件的高 

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

2、height(val) 

為每個匹配的元素設定css高度(hidth)屬性的值。如果沒有明確指定單位(如:em或%),使用px。如果沒有明確指定單位(如:em或%),使用px。 

返回值 jquery 

引數 val (string, number) : 設定css中 'height' 的值 

示例: 

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

文件片段:hello

2nd paragraph

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

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

3、width() 

取得第乙個匹配元素當前計算的寬度值(px)。在 jquery 1.2 以後可以用來獲取 window 和 document 的寬 

返回值 integer 

示例:0 

/* //獲取第一段的寬 

文件片段:hello

2nd paragraph

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

4、width(val) 

為每個匹配的元素設定css寬度(width)屬性的值。如果沒有明確指定單位(如:em或%),使用px。 

返回值 jquery 

引數 val (string, number) : 設定 css 'width' 的屬性值 

示例: 

/* //將所有段落的寬設為 20 

文件片段:hello

2nd paragraph

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

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

5、innerheight() 

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

返回值 integer 

示例: 

/* //獲取第一段落內部區域高度 

文件片段:hello

2nd paragraph

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

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

7、innerwidth() 

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

返回值 integer 

示例: 

/* //獲取第一段落內部區域寬度 

文件片段:hello

2nd paragraph

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

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

7、outerheight(options) 

獲取第乙個匹配元素外部高度(預設包括補白和邊框)。此方法對可見和隱藏元素均有效。 

返回值 integer 

引數 options(boolean) : (false)  設定為 true 時,計算邊距在內。 

示例: 

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

文件片段:hello

2nd paragraph

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

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

8、outerheight(options) 

獲取第乙個匹配元素外部寬度(預設包括補白和邊框)。此方法對可見和隱藏元素均有效。 

返回值 integer 

引數 options(boolean) : (false)   設定為 true 時,計算邊距在內。 

示例: 

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

文件片段:hello

2nd paragraph

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

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

CSS控制滑鼠樣式

hand是手型 pointer也是手型,這裡推薦使用這種,因為這可以在多種瀏覽器下使用。crosshair是十字型 text是移動到文字上的那種效果 wait是等待的那種效果 default是預設效果 help是問號 e resize是向右的箭頭 ne resize是向右上的箭頭 n resize是...

css樣式控制居中

在說到這個問題的時候,也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才...

css控制文字樣式

css字型樣式屬性點由量放視質為了更方便的控制網頁中各種各樣的字型,css提供了一系列的字型樣式屬性 font size屬性用於設定字型大小。font family屬性用於設定字型。font weight屬性用於定義字型的粗細。font variant屬性用於設定變體 字型變化 font style...