jquer属性 offset、position、scrollTop

尺寸操作
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) })

 

转载于:https://www.cnblogs.com/wdz1/p/7868776.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值