js三大家族offset,scroll,cliennt的区别

offset偏移（返回的是number类型）

 

offsetLeft:返回盒子距离左边的距离

offsetTop:返回盒子距离顶部的距离

offsetHeight:返回盒子的高度，包括border，padding，不包括margin;

offsetWidth:返回盒子的宽度，包括border，padding，不包括margin;

offsetX:

offsetY:

offsetParent:找到有定位的父元素

offset与style.top的区别：

1.offset可以返回没有定位的盒子距离左边的位置,style.top不可以；

2.style.top只能返回行内式，如果没有则返回"";

3.offset返回的是number,style.top返回的是String，加px;

4.offset只读，style.top可读写；

 

scroll卷曲

 

scrollLeft:x轴卷曲的距离（ie8不支持）

scrollTop:Y轴卷曲的距离（ie8不支持）

/**
 * 兼容封装的scrollLeft和scrollTop
 * @returns {{left: (Number|number), top: (Number|number)}}
 */
function getScroll() {
    return{
        left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,//获取的浏览器的scrollLeft
        top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0//获取的浏览器的scrollTop
    };
}

scrollHeight:实际页面的高度(如果页面超出了盒子的高度，则是内容的值，如果没有超出去则是盒子的值)

scrollWidth:实际页面的宽度（width+padding）

scrollX:

scrollY:

client可视区域

clientLeft:

clientTop:

clientWidth:

clientHeight:

clientX:

clientY:

转载于:https://www.cnblogs.com/mynana/p/6166045.html