偏移量的概念

* { padding: 0; margin: 0; } #box { width: 100px; height: 100px; margin: 10px; padding: 10px; border: 5px solid red; } <div id="box"></div>

offset系列

var box = document.getElementById('box'); //box的父级元素是body，所以获取的是body的标签 console.log(box.offsetParent); //获取的是与浏览器左边缘的距离，结果是10 console.log(box.offsetLeft); //获取的是与浏览器上边缘的距离，结果是10 console.log(box.offsetTop); //获取的是自身的宽，包括自己的padding，border，结果是130 console.log(box.offsetWidth); //同理，结果是130 console.log(box.offsetHeight);

client系列

//获取的是与自身边框的距离，就是可以看见内容的距离 //这两个结果都是5，因为设置了边框，所以到自身边框距离是5 console.log(box.clientTop) console.log(box.clientLeft); //获取自身的宽高（包括padding，不包括border） //宽高都是100，加上有内边距，所以是120 console.log(box.clientWidth); console.log(box.clientHeight);

scroll系列

//往左滑动的时候，里面的内容隐藏了多少距离就是scrollLeft的距离 console.log(box.scrollLeft) //往上滑动的时候，里面的内容隐藏了多少距离就是scrollLeft的距离 console.log(box.scrollTop) //隐藏内容的宽 console.log(box.scrollWidth) //隐藏内容的高 console.log(box.scrollHeight)