jquer属性 offsetpositionscrollTop

Posted 2020-10-15 Me*淡定

尺寸操作

1、获取宽高

     a) jq对象.height/width () :只有获取高度/宽度

        尺寸，不包括padding和margin 和 border

2、设置宽度

   a) Jq对象 . height/ width("200px");

   b) px可加可不加，不加不需要写双引号

jQuery(function(){
            //获取宽度
            $("button").eq(0).click(function(){
                和js offsetWidth 不一样
               alert( $("div").width())
            });

            //设置宽度
            $("button").eq(1).click(function(){
                $("div").width(200)
            })

            //获取高度
            $("button").eq(2).click(function(){
                alert( $("div").width())
            });

            //设置高度
            $("button").eq(3).click(function(){
                $("div").width(200)
            });

        })

 

坐标值操作

1、offset（）. left /top 获取该对象距离页面顶端 左边的距离

 //offset().top 获取对象距离页面顶部/左边的距离 和定位没关系
            $("button").eq(0).click(function(){
                alert($(".box2").offset().top)
            });

            // 无用，只能获取值 不能赋值
            $("button").eq(1).click(function(){
                $(".box2").offset().top=100
            })
        }

2、position(). left/top 距离最近的定位父级元素的上边距 左边距

   //position().top 距离定位的父盒子上边距 / 左边距
            // 不包含margin padding 就的定位的距离
            $("button").eq(2).click(function(){
                alert($(".box2").position().top)
            });

3、scrollTop/left 被卷曲的头部高度 

<span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>

$("button").eq(4).click(function(){ alert($(".box1").scrollTop()) }) //获取头部卷上去的高度

<span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>

//复制，让滚动到指定的位置 
$("button").eq(5).click(function(){ $(document).scrollTop(200) })