8、jQuery 尺寸、位置操作

8、jQuery 尺寸、位置操作

1、jQuery 尺寸

语法	用法
width()/height	获取设置元素 width和height大小值
innerWidth() / innerHeight()	获取设置元素width和height值，包含padding
outerWidth() / outerHeight()	获取设置元素width和height值，包含padding + border
outerWidth(true) / outerHeight(true)	获取设置元素width和height值，包含padding + border + margin

①以上参数为空，则是获取相应值，返回的是数字型

②如果参数为数字，则是修改相应值

③参数可以不必写单位

2、jQuery 位置

（1） offset()获取设置距离文档的位置

①offset()有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离

console.log($(".son").offset());      

console.log($(".son").offset().top);

$(".son").offset({
    top: 200,
    left: 200
});

（2）position()获取距离带有定位父级位置

①该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离

② 该方法只能获取不能设置偏移

 console.log($(".son").position());

（3）scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

① scrollTop() 方法设置或返回被选元素被卷去的头部

② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

 // 页面滚动事件
 var boxTop = $(".container").offset().top;
 $(window).scroll(function() {
 console.log($(document).scrollTop()); // 文档卷去的头部
   if ($(document).scrollTop() >= boxTop) {
           $(".back").fadeIn();
     } else {
         $(".back").fadeOut();
     }
});

// 返回顶部
$(".back").click(function() {
$("body, html").stop().animate({
        scrollTop: 0 // 做动画慢慢返回顶部
 });
// animate不能对文档做动画,需要对html和body元素做动画
 });