juqery学习之六CSS--css、位置、宽高

css(name)
访问第一个匹配元素的样式属性。

--------------------------------------------------------------------------------

Returnastylepropertyonthefirstmatchedelement.
返回值
String

参数
name(String):要访问的属性名称

示例
取得第一个段落的color样式属性的值。

jQuery代码:

$("p").css("color");
-------------------------------------------------------------------------------------------------------------------------------------------------
css(properties)
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

--------------------------------------------------------------------------------

Setakey/valueobjectasstylepropertiestoallmatchedelements.
Thisisthebestwaytosetseveralstylepropertiesonallmatchedelements.
返回值
jQuery

参数
properties(Map):要设置为样式属性的名/值对

示例
将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery代码:

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

--------------------------------------------------------------------------------

如果属性名包含"-"的话，必须使用引号:

jQuery代码:

$("p").css({"margin-left":"10px","background-color":"blue"});
-------------------------------------------------------------------------------------------------------------------------------------------------
css(name,value)
在所有匹配的元素中，设置一个样式属性的值。
数字将自动转化为像素值

--------------------------------------------------------------------------------

Setasinglestylepropertytoavalueonallmatchedelements.
Ifanumberisprovided,itisautomaticallyconvertedintoapixelvalue.
返回值
jQuery

参数
name(value):属性名

value(String,Number):属性值

示例
将所有段落字体设为红色

jQuery代码:

$("p").css("color","red");
-------------------------------------------------------------------------------------------------------------------------------------------------
offset()
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top和left。此方法只对可见元素有效。

--------------------------------------------------------------------------------

Getthecurrentoffsetofthefirstmatchedelementrelativetotheviewport.
ThereturnedobjectcontainstwoIntegerproperties,topandleft.Themethodworksonlywithvisibleelements.
返回值
Object{top,left}

示例
获取第二段的偏移

HTML代码:

<p>Hello</p><p>2ndParagraph</p>
jQuery代码:

varp=$("p:last");
varoffset=p.offset();
p.html("left:"+offset.left+",top:"+offset.top);
结果:

<p>Hello</p><p>left:0,top:35</p>
-------------------------------------------------------------------------------------------------------------------------------------------------
height()
取得第一个匹配元素当前计算的高度值（px）。
在jQuery1.2以后可以用来获取window和document的高

--------------------------------------------------------------------------------

Getthecurrentcomputed,pixel,heightofthefirstmatchedelement.
InjQuery1.2,thismethodisabletofindtheheightofthewindowanddocument.
返回值
Integer

示例
获取第一段的高

jQuery代码:

$("p").height();

--------------------------------------------------------------------------------

获取文档的高

jQuery代码:

$(document).height();
把所有段落的高设为20:

jQuery代码:

$("p").height(20);
-------------------------------------------------------------------------------------------------------------------------------------------------
width()
取得第一个匹配元素当前计算的宽度值（px）。
在jQuery1.2以后可以用来获取window和document的宽

--------------------------------------------------------------------------------

Getthecurrentcomputed,pixel,widthofthefirstmatchedelement.
InjQuery1.2,thismethodisabletofindthewidthofthewindowanddocument.
返回值
Integer

示例
获取第一段的宽

jQuery代码:

$("p").width();

--------------------------------------------------------------------------------

获取当前窗口的宽

jQuery代码:

$(window).width();
将所有段落的宽设为20:

jQuery代码:

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