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: