关于jQuery--css部分

1.css

css(name|pro|[,val|fn])1.9* （ 操作元素css样式）

• 获取(参数：name)：
  $("button").css("width");
• 设值：
  (1) 单个样式(参数：name,val)：
  $("button").css("height","200px");
  (2) 多个样式(参数：pro)：
  $("button").css({"width":"100px","backgroundColor":"red"});
  //设置多个css样式的时候, 样式名称要规范(如示例)

2. 位置

获取和设值均不带像素单位

(1) offset([coordinates]) 获取匹配元素在当前视口的相对偏移
$("button").offset();返回值是一个对象

• 如何使用？
  var offset=$("button").offset();
offset.left|| offset.top
• 设值：
  $(".btn").offset({top:30,left:30});;

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

• 获取：
  $(".btn").position(); 返回值是一个对象

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

• 获取：
  $(window).scrollTop();
$(window).scrollLeft();
• 设值：
  $(window).scrollTop(100);
$(window).scrollLeft(100);

3.尺寸

(1) height([val|fn]) / width([val|fn]) 匹配元素当前计算的宽高

• 获取：
  $(".btn").width();
$(".btn").height();
• 设值：
  $(".btn").width(200);
$(".btn").height(200);
• 回调函数：

 $(".btn").width(function(index,old){
            console.log(index, old);
        })
 $(".btn").height(function(index,old){
            console.log(index, old);
        })        

(2) innerHeight() / innerWidth() 第一个匹配元素内部区域（边框以内 包括padding）

• 获取：
  $(".btn").innerHeight();
$(".btn").innerWidth();

(3) outerHeight([options]) / outerWidth([options]) 第一个匹配元素外部区域（包括边框）

• 获取：(参数:默认是false，改为true时包括边距)
  $(".btn").outerHeight();
$(".btn").outerWidth(true);

本文的测试代码：

 <style>
        .btn{
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        .btn2 {
            width: 200px;
            height: 100px;
        }
    </style>
<button class="btn"></button>
<button class="btn2"></button>
<div style=" height: 1000px;width: 1000px"></div>