jQuery函式學習之五 css部分

2022-02-05 12:27:12 字數 2289 閱讀 2616

也就是對dom元素中的樣式進行操作

函式:css(name)

功能:獲取匹配元素指定屬性名的值

返回:string

引數:要訪問的樣式屬性名

例子:retrieves the color style of the first paragraph

jquery code

$("p").css("color");

before

<

p style

="color:red;"

>

test paragraph.

p>

result:

"red"

retrieves the font-weight style of the first paragraph.

jquery code

$("p").css("font-weight");

before

<

p style

="font-weight: bold;"

>

test paragraph.

p>

result:

"bold"

函式:css(properties),css(key, value)

功能:設定一組樣式,設定乙個樣式

返回:jquery物件

引數:屬性陣列物件,屬性名/值

例子:sets color and background styles to all p elements.

jquery code

$("p").css();

before

<

p>

test paragraph.

p>

result:

<

p style

="color:red; background:blue;"

>

test paragraph.

p>

changes the color of all paragraphs to red

jquery code

$("p").css("color","red");

before

<

p>

test paragraph.

p>

result:

<

p style

="color:red;"

>

test paragraph.

p>

changes the left of all paragraphs to "30px"

jquery code

$("p").css("left",30);

before

<

p>

test paragraph.

p>

result:

<

p style

="left:30px;"

>

test paragraph.

p>

函式:height(),height(val)

功能:獲取第乙個匹配元素的高度,height(val)設定所有匹配元素的高度

返回:string

例子:jquery code

$("p").height();

before

<

p>

this is just a test.

p>

result:

300jquery code

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

before

<

p>

this is just a test.

p>

result:

<

p style

="height:20px;"

>

this is just a test.

pjquery code

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

before

>

this is just a test.

p>

result:

<

p style

="height:20em;"

>

this is just a test.

p>

函式:width(),width(val)

功能:獲取第乙個元素的寬度,width(val)設定所有匹配元素的寬度

例子:和上面差不多,就不列舉了。

jquery 學習 五 CSS 操作

html css 樣式 css樣式 style body div.a1 dsstyle html div div div button class a1 ds onclick f2 返回頂部 button div css操作 css 操作 樣式操作 css 偏移量屬性 offset.屬性 相對於檢視...

jQuery函式學習之八 Effects部分

這一節我們來學習一下jquery實現一些動畫的函式,我初步試驗了一下,效果非常不錯。以前純粹自己實現的漸顯,漸隱等 要寫很多 的,現在基本一行搞定,大家可以試試哦。函式 animate params,speed,easing,callback 功能 這是個用來設定自定義動畫的函式,這個函式的關鍵之處...

jQuery函式學習之七 Ajax部分

location boston success function msg jquery code var html ajax responsetext jquery code var xmldocument create xml document ajax 函式 ajaxsetup settings...