jQuery css操作

jQuery操作css的元素样式
1.访问匹配元素的样式属性

来个小案例：

    <div id="div" style="200px;height:200px;background:red;"></div>
    //宽高都是200px，背景颜色红色;

怎么获取div的属性值呢：

   $("#div").css("width")//这就可以获取到宽的值
   console.log($("#div").css("width"))//打印一下看看结果

结果出来了：

那怎么把宽和颜色改变一下呢：

     $("#div").css("width"，"300px")//这样在属性后边跟个值就可以了，宽就变成300px了；
     $("#div").css("background"，"yellow")//这样背景颜色就变成了黄色；
     $("#div").css({"width":"300px","background":"yellow"})//这是一个组合的写法是不是要比上边简单；

回调函数的写法：

     $("#div").click(function() {
        $(this).css({
           function(index, value) {
            return parseFloat(value) * 2;
          }, 
          height: function(index, value) {
            return parseFloat(value) * 2;
          }
        });
      });
    //这是一个点击事件每当点击div的时候它本身都会放大2倍；

2.css位置操作

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

案例：

<div id="div" style="200px;height:200px;background:red;margin:30px"></div>

获取元素在当前视口的相对偏移：

$("#div").offset();//这样就可以获取到偏移值；
console.log($("#div").offset());//怎么也得打印一下看看结果啊 ；

打印结果：

当然能够获取值肯定还是能够赋值的：

$("#div").offset({left：50,top:100})//这样就可以了 引号是可以不用加的，最后结果是距离视口左边50px，上边100px；

2.2 position()获取获取匹配元素相对父元素的偏移

注意到没有position后边（）里边没有中括号[]这个是只能获取不能赋值的；

使用方法：

    $("p").position()//这样就可以获取到距离父元素左边和上边的距离了；

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

使用方法：

    $("div.demo").scrollTop(300);//滚动距离顶部300px；
    $("div.demo").scrollTop(0);//这样就是在顶部了  也可以说回到顶部；

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

使用方法：

    同上；

3. css尺寸操作：

3.1 height([val|fn])：

    $("div").height()//这是获取当前元素的高不算边框的和隐藏部分；
    $("div").haight(function(n,c){
        return c+10;
    })
    //这是一个函数使用方法，这样div本身的高就增加10px；

3.2 width([val|fn])：

    同上！

3.3 innerHeight()：

    $("div").innerHeight()//这是获取当前元素的高和隐藏和空白部分；

3.4 innerWidth():

    同上！

3.5 outerHeight([options]):

    $("#div").outerHeight()//这样使用是默认为fales 只获取当前高度；
    $("#div").outerHeight(true)//这样使用不仅获取当前高度还获取了空白 边框 隐藏部分；

3.6 outerWidth():

    同上！