jQuery中的CSS（四）

1. css(name|pro|[,val|fn]), 访问匹配元素的样式属性

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

参数说明：

• name：要访问的属性名称
• properties：要设置样式的键值对对象，{"":""}
• name,value：属性名，属性值
• name,function(index, value)：
  • 属性名
  • 此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

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

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

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

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

2. offset([coordinates]), 获取匹配元素在当前视口的相对偏移

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

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

3. position(), 获取匹配元素相对父元素的偏移

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

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

4. scrollTop([val]), 获取匹配元素相对滚动条顶部的偏移

此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );

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

5. scrollLeft([val]), 获取匹配元素相对滚动条左侧的偏移

此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

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

6. height([val|fn]), 取得匹配元素当前计算的高度值（px）

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

function(index, height)：返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

$("p").height();

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

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

7. width([val|fn]), 取得第一个匹配元素当前计算的宽度值（px）

在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

function(index, height)：返回用于设置宽度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。

$("p").width();

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

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

8. innerHeight(), 获取第一个匹配元素内部区域高度（包括补白、不包括边框）

此方法对可见和隐藏元素均有效

9. innerWidth(), 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）

此方法对可见和隐藏元素均有效

10. outerHeight([options]), 获取第一个匹配元素外部高度（默认包括补白和边框）

此方法对可见和隐藏元素均有效。

参数说明：

• options：Boolean，设置为 true 时，计算边距在内。

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

11. outerWidth([options])，获取第一个匹配元素外部宽度（默认包括补白和边框）

此方法对可见和隐藏元素均有效

参数说明：

• options：Boolean，设置为 true 时，计算边距在内。

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );