jQuery css操作

jQuery

css操作

1)css
2）位置
3）尺寸

1.css操作之css

css(name|pro|[,val|fn])
当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

2.css操作之位置

（1）offset([coordinates])

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
coordinates{top,left}
必需。规定以像素计的 top 和 left 坐标。
可能的值：
值对，比如 {top:100,left:0}
带有 top 和 left 属性的对象

（2）position()

获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。
例如：
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:

Hello

scrollTop: 0

（3）scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。
val：设定垂直滚动条值
例如：
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:

Hello

scrollTop: 0

。

（4）scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
结果:

Hello

scrollLeft: 0

3.css操作之尺寸

（1）height([val|fn])

取得匹配元素当前计算的高度值（px）。
val
设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

（2）width([val|fn])

取得第一个匹配元素当前计算的宽度值（px）。
val
设定CSS中 'width' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。

（3）innerHeight()

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
例如：
获取第一段落内部区域高度。
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
结果:

Hello

innerHeight: 16

（4）innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
例如：
获取第一段落内部区域宽度。
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
结果:

Hello

innerWidth: 40

（5）outerHeight([options])

获取第一个匹配元素外部高度（默认包括补白和边框）。
例如：
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
结果:

Hello

outerHeight: 35 , outerHeight(true):55

（6）outerWidth([options])

获取第一个匹配元素外部宽度（默认包括补白和边框）。
例如：
HTML 代码:

Hello

2nd Paragraph

jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
结果:

Hello

outerWidth: 65 , outerWidth(true):85