offset、client、scroll

offset

offsetParent用于获取定位的父级元素

var box = document.getElementById('box');
console.log(box.offsetParent);     //离当前元素最近的定位父元素
console.log(box.offsetLeft);           //离offsetParent的左偏移量
console.log(box.offsetTop);           //离offsetParent的上偏移量
console.log(box.offsetWidth);        //盒子的宽度，包含padding 和 border
console.log(box.offsetHeight);       //盒子的高度，包含padding 和 border

1498743207418.png

client

var box = document.getElementById('box');
console.log(box.clientLeft);//盒子的左边框宽度
console.log(box.clientTop);//盒子的上边框宽度
console.log(box.clientWidth);//盒子的宽度，包含padding 
console.log(box.clientHeight);//盒子的高度，包含padding 

1504075813134.png

scroll 滚动偏移

var box = document.getElementById('box');
console.log(box.scrollLeft) //内容滚动出去的左距离
console.log(box.scrollTop) //内容滚动出去的上距离
console.log(box.scrollWidth) //内容的宽度，包括padding和未显示的距离，不包括滚动条
console.log(box.scrollHeight) //内容的高度，包括padding和未显示的距离，不包括滚动条

1498743288621.png