1. jQuery操作css属性
2. jQuery操作位置属性
3. jQuery操作尺寸属性

1. jQuery操作css属性

1. 逐个设置

$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");

2. 链式设置

$("div").css("width", "100px").css("height", "100px").css("background", "red");

3. 批量设置

$("div").css({
    width: "100px",
    height: "100px",
    background: "red"
})

4. 获取css样式值

$("div").css("width");

2. jQuery操作位置属性

2.1 offset()

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

// 获得offset属性的值
$("div").offset();
$("div").offset().top;
$("div").offset().left;
// 设置offset属性的值
$("div").offset({ top: 10, left: 30 });

2.2 position()

获取匹配元素相对父元素的偏移

// 获得position属性的值
$("div").position();
$("div").position().top;
$("div").position().left;
// 设置position属性的值
$("div").position({ top: 10, left: 30 });

2.3 scrollTop()

获取匹配元素相对滚动条顶部的偏移

// 获得scrollTop属性的值
$("html,body").scrollTop();
// 设置scrollTop属性的值
$("html,body").scrollTop(300);

2.4 scrollLeft()

获取匹配元素相对滚动条左侧的偏移

// 获得scrollLeft属性的值
$("html,body").scrollLeft();
// 设置scrollLeft属性的值
$("html,body").scrollLeft(300);

3. jQuery操作尺寸属性

3.1 height()

获取/设置匹配元素文本区域高度（不包括padding、不包括border）

// 获取
$("div").height();
// 设置
$("div").height(20);

3.2 width()

获取/设置匹配元素文本区域宽度（不包括padding、不包括border）

// 获取
$("div").width();
// 设置
$("div").width(20);

3.3 innerHeight()

获取/设置匹配元素内部区域高度（包括padding、不包括border）

// 获取
$("div").innerHeight();
// 设置
$("div").innerHeight(20);

3.4 innerWidth()

获取/设置匹配元素内部区域宽度（包括padding、不包括border）

// 获取
$("div").innerWidth();
// 设置
$("div").innerWidth(20);

3.5 outerHeight()

• 获取/设置匹配元素外部区域高度（包括padding、包括border）
• 传入参数true，返回值包括margin在内

// 获取
$("div").outerHeight();
// 设置
$("div").outerHeight(20);

3.6 outerWidth()

• 获取/设置匹配元素外部区域宽度（包括padding、包括border）
• 传入参数true，返回值包括margin在内

// 获取
$("div").outerWidth(false);  // 默认，不包括margin
$("div").outerWidth(true);  // 包括margin
// 设置
$("div").outerWidth(20);