jQuery offset方法、position方法和scroll相关方法

jQuery offset方法、position方法和scroll相关方法

offset方法和position方法scroll相关方法

offset方法和position方法

offset方法 原生js的三大家族 offset家族 scroll家族 client家族 offset家族 : offsetWidth offsetHeight offsetLeft offsetTop offsetParent

offset方法获取到的是一个对象 这里的offset方法 和原生的offset家族不一样，里面是left和top的键值对 获取到的是元素距离document的距离

调用offset方法 获取返回值 jquery对象.offset()

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

可以进行设置 设置的值是一个对象 里面包含left top值

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

需要注意的是 当我们的子元素没有定位的时候 那么给元素设置offset(调用offset方法) 就会给这个元素添加一个相对定位

jquery对象.offset(设置的属性构成的对象)

position方法

获取到的值还是一个对象 里面也是left和top的键值对 jQuery对象.position()

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

position不能进行设置

$("#son").position({ left:200, top:200 })

获取到的是元素相对于定父级的距离

scroll相关方法

jquery对应的scrollLeft() scrollTop() 和原生js里面scrollLeft和scrollTop属性是一样的 都是获取内容滚动出去的距离 jQuery对象.scrollLeft() jQuery对象.scrollTop()

console.log($("#one").scrollLeft()) console.log($("#one").scrollTop())

设置滚动出去的距离 jQuery对象.scrollLeft(属性值) jQuery对象.scrollTop(属性值)

$("#one").scrollLeft(100); $("#one").scrollTop(100);