jQuery学习之七---CSS

这一篇，话不多说，直接来学习吧，我觉得很重要~

CSS

1、css(name|pro|[,val|fn])访问匹配元素的样式属性。
参数解析：

name：要访问的属性名称
properties：要设置为样式属性的名/值对
name，value：属性名，属性值
name，function（index，value）：属性名；函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

$("p").css("color");//取得p标签的字体颜色
$("p").css({ "color": "#ff0011", "background": "blue" });//把p标签的字体颜色设为red，背颜设为蓝色
$("p").css("color","red");//p标签的字体颜色设为red
//逐渐增加div的大小
$("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，以像素计。此方法只对可见元素有效。

$("p").offset();//获取p标签的left和top值
$("p:last").offset({ top: 10, left: 30 });//设置最后一个p标签的offset偏移量

位置

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

<p>Hello</p><p>2nd Paragraph</p>
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>

4、scrollTop（val）
获取/设置匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。

$("p").scrollTop();//获取p标签相对于滚动条顶部的偏移
$("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移

5、scrollLeft（value）
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。

$("p").scrollLeft();//获取p标签相对于滚动条左部的偏移
$("div.demo").scrollLeft(300);//设置相对滚动条左部的偏移

尺寸

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

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

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

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

8、innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
<p>Hello</p><p>innerHeight: 16</p>

9、innerWidth()获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
<p>Hello</p><p>innerWidth: 40</p>

10、outerHeight([options])/outerWidth([options])获取第一个匹配元素外部高度/宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
options：设置为 true 时，计算边距在内。