jq02--尺寸位置、height()/width()、offset()、position()、scrollTop()/scrollLeft()

1 尺寸位置操作

1.1 高度和宽度操作（尺寸）

高度操作height()/width() ：

作用：设置或获取匹配元素的高度/宽度值（返回number）

width([val|fn])

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

//带回调函数

$(selector).width(function(i,w){ });

i - 可选。接受选择器的 index 位置(建议添上)
w - 可选。接受选择器的当前值。

当给元素设置了固定的w/h后设置padding、border属性不能获取padding、border只能获取设置的w/h；大小由padding撑起，可获得padding的w/h但不能获取border的尺寸

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            /*height: 200px;*/
            padding: 50px ;
            background-color: pink;
            cursor: pointer;
            text-align: center;
            border:5px solid hotpink;
        }
    </style>
</head>
<body>
<div class="event">
    <button class="but">尺寸</button>
    <div class="box">
        <p>https://blog.csdn.net/muzidigbig</p>
    </div>
    <p>你既然认准一条道路，何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    //不带参获取当前对象的宽高；带参设置对象的宽高
    var w = $('.box').width();
    var h = $('.box').height();
    console.log('w:'+w+'    h:'+h);
//    var sh = $('.box').height(200);
    $('.but').on('click',function () {
        //以 10 像素的幅度增加'.box'元素的宽度
        $('.box').width(function (i,w) {
            return w+10;
        });
    })
</script>
</html>

css()获取高度和height获取高度的区别？

1.2 坐标值操作（位置）

offset()

作用：获取或设置元素在当前窗口（整个页面）的偏移位置

// 无参数表示获取，返回值为：{left:num,top:num}，值是相对于document的位置

$(selector).offset();

// 有参数表示设置，参数推荐使用数值类型

$(selector).offset({left:100, top: 150});

注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

<script>

    $('.but').on('click',function () {
        var offset = $('.box').offset({left:200,top:200});
        console.log(offset);
    })
</script>

1.3 position()

作用：获取相对于其最近的具有定位的父元素的位置。

// 获取，返回值为对象：{left:num, top:num}

$(selector).position();

注意：只能获取，不能设置（没有参数）。

1.4 scrollTop()

作用：获取或者设置元素垂直方向滚动的位置(被卷去的高度，必须要有滚动条)

// 无参数表示获取偏移

// 有参数表示设置偏移，参数为数值类型

$(selector).scrollTop(100);

scrollLeft()

作用：获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

对scrollTop的理解：

垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。

如果滚动条在最上方没有滚动或者当前元素没有出现滚动条，那么这个距离为0

<script>

    $('.but').on('click',function () {
        //初始状态值
        console.log($('.box').scrollTop());
        $('.box').scrollTop(30);
        //获得设置后的值
        console.log($('.box').scrollTop());
    });
</script>

若有不足请多多指教！希望给您带来帮助！