jQuery位置、CSS和尺寸

位置

offset([coordinates])

获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效

无参数描述: 获取第二段的偏移

HTML代码

<p>Hello</p><p>2nd Paragraph</p>

jQuery代码

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

结果

<p>Hello</p><p>left: 0, top: 35</p>

参数coordinates 描述: 设置第二段的偏移

HTML代码

<p>Hello</p><p>2nd Paragraph</p>

jQuery代码

$("p:last").offset({ top: 10, left: 30 });

position()

获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

无参数描述: 获取第一段相对父元素的偏移

HTML代码

<p>Hello</p><p>2nd Paragraph</p>

jQuery代码

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

结果

<p>Hello</p><p>left: 15, top: 15</p>

scrollTop([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>

参数val 描述: 设置相对滚动条顶部的偏移

jQuery代码

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

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>

参数val 描述: 设置相对滚动条左侧的偏移

jQuery代码

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

CSS

css(name|pro|[,val|fn])

访问匹配元素的样式属性。

参数name 描述: 取得第一个段落的color样式属性的值

jQuery代码

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

参数properties 描述: 将所有段落的字体颜色设为红色并且背景为蓝色

jQuery代码

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

参数name,value 描述: 将所有段落字体设为红色

jQuery代码

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

参数name,回调函数 描述: 逐渐增加div的大小

jQuery代码

 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

尺寸

height([val|fn])

取得匹配元素当前计算的高度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高

无参数描述: 获取第一段的高

jQuery代码

$("p").height();

参数val 描述: 把所有段落的高设为 20:

jQuery代码

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

参数function(index, height) 描述: 以 10 像素的幅度增加 p 元素的高度

jQuery代码

  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

width([val|fn])

取得第一个匹配元素当前计算的宽度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

无参数描述: 获取第一段的宽

jQuery代码

$("p").width();

参数val 描述: 把所有段落的宽设为 20:

jQuery代码

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

参数function(index, height) 描述: 以 10 像素的幅度增加 p 元素的宽度

jQuery代码

$("button").click(function(){
    $("p").width(function(n,c){
        return c+10;
    });
  });

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>

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>

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>

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>

摘自 jQuery API 文档