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 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:
<p>Hello</p><p>scrollTop: 0</p>
（3）scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。
val：设定垂直滚动条值
例如：
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:
<p>Hello</p><p>scrollTop: 0</p>。
（4）scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
结果:
<p>Hello</p><p>scrollLeft: 0</p>
3.css操作之尺寸
（1）height([val|fn])
取得匹配元素当前计算的高度值（px）。
val
设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。
（2）width([val|fn])
取得第一个匹配元素当前计算的宽度值（px）。
val
设定CSS中 'width' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。
（3）innerHeight()
获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
例如：
获取第一段落内部区域高度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
结果:
<p>Hello</p><p>innerHeight: 16</p>
（4）innerWidth()
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
例如：
获取第一段落内部区域宽度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
结果:
<p>Hello</p><p>innerWidth: 40</p>
（5）outerHeight([options])
获取第一个匹配元素外部高度（默认包括补白和边框）。
例如：
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
结果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
（6）outerWidth([options])
获取第一个匹配元素外部宽度（默认包括补白和边框）。
例如：
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
结果:
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>
