视窗位置与尺寸

获取浏览器视口宽高

**window.innerxxx

下面方法是包括滚动条的宽高

window.innerWidth
window.innerHeight

**clientWidth

返回元素不含滚动条的尺寸，不包括边框

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
//这是兼容写法

混杂模式就是没有

• 如果是 document.documentElement，那么返回的是不包含滚动条的视口尺寸
• 如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸

计算浏览器滚动距离

**scrollLeft/scrollTop

这个方法返回元素滚动条的位置

• 如果元素是根元素，那么返回 window.scrollY 的值

document.documentElement.scrollTop

• 如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值

document.body.scroLLTop

因此可用于处理页面滚动的距离的兼容

元素占用的空间尺寸和位置

*clientWidth/clientHeight

返回元素不含滚动条的尺寸，不包括边框

返回元素本身的宽高 + padding

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
//这是兼容写法

混杂模式就是没有

• 如果是 document.documentElement，那么返回的是不包含滚动条的视口尺寸
• 如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸

clientLeft/clientTop

返回的是计算后的 CSS 样式的 border-left-width/border-top-width 的值，就是边框的宽度

offsetWidth/offsetHeight

同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸，这个方法

返回元素本身的宽高 + padding + border + 滚动条

*offsetLeft/offsetTop

相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值 offsetLeft/offsetTop 返回元素 X Y 坐标值

元素内容的宽高和滚动距离

scrollWidth/scrollHeight

这个方法返回元素内容区域的宽高 + padding + 溢出内容尺寸

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

• 如果元素是 document.documentElement，返回的是视口滚动区域宽度和视口宽度中较大的那个
• 如果元素是 document.body，并且是在混杂模式下，那么返回的是视口滚动区域宽度和视口宽度中较大的那 个

scrollLeft/scrollTop

这个方法返回元素滚动条的位置

• 如果元素是根元素，那么返回 window.scrollY 的值
• 如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值

因此可用于处理页面滚动的距离的兼容

偏移量offset

offsetParent(可以找定位父元素)

• offsetParent用于获取定位的父级元素
• offsetParent和parentNode的区别

var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);//到父级元素的左边距离
console.log(box.offsetTop);
console.log(box.offsetWidth);//内容宽度+padding+boder+滚动条
console.log(box.offsetHeight);

内容区域大小client

var box = document.getElementById('box');
console.log(box.clientLeft);//左边框宽度
console.log(box.clientTop);
console.log(box.clientWidth);//元素本身的宽高 + padding
console.log(box.clientHeight);

滚动偏移scroll

var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)//内容区域的宽高 + padding + 溢出内容尺寸
console.log(box.scrollHeight)

汇总

offset系列:获取元素的宽,高,left,top, offsetParent
offsetWidth:元素的宽,有边框
offsetHeight:元素的高,有边框
**offsetLeft:元素距离左边位置的值
**offsetTop:元素距离上面位置的值
​
client系列:可视区域
**clientWidth:可视区域的宽(没有边框),边框内部的宽度
**clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop :上面的边框的宽度
​
scroll系列:卷曲出去的值
**scrollLeft:向左卷曲出去的距离
**scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际的宽(如果内容很少或者没有内容, 元素自身的宽),没有边框
scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框