1. window对象的宽高

window 对象包含 screen、document 对象，使用 window 对象的属性或者方法时可以省略 window。

浏览器窗口内宽高 window.innerWidth、window.innerHeight
浏览器窗口整个的宽高 window.outerWidth、window.outerHeight
浏览器窗口已滚动的坐标：window.scrollX、window.scrollY

1.1 innerHeight 和 outerHeight的区别

window.innerHeight 是浏览器窗口内的宽高，只包含文档页面的高度，随浏览器的窗口大小而改变
window.outerHeight 包含有浏览器菜单栏、控制台等的整个高度，随浏览器的窗口大小而改变

即：outerHeight = innerHeight + 地址栏高度 +工具栏高度 +….

1.2 innerWidth 和 outerWidth

在浏览器全屏状态以及Mac系统中，两者是一样的。

在不是全屏的状态下，outerWidth 比 innerWidth 多出滚动条的宽度

1.3 兼容性

innerHeight 和 outerHeight 是有兼容性的,IE9 以下不支持

1.4 scrollX 和 scrollY

获取窗口滚动的 x、y 坐标，通常用来获取整个页面的已滚动高度和宽度

与下面用法是一致的：

  1. window.scrollX === document.documentElement.scrollLeft
  2. window.scrollY === document.documentElement.scrollTop

2. screen 对象的宽高

屏幕分辨率的宽高 screen.width、screen.height
屏幕分辨率的可用宽高 screen.availWidth、screen.availHeight

注意：screen 下的宽高是不会改变的，不会随浏览器窗口大小而改变。由电脑的屏幕分辨率决定。无兼容性问题

2.1、screen.height 和 screen.availHeight

在windows系统中，availHeight 减少了底部任务栏的高度
在mac系统中，减少了顶部菜单栏的高度

2.2、screen.width 和 screen.availWidth

跟前面的区别一样。windows 系统可以把任务栏设置到上下左右

2.3、screenTop 和 screenLeft

浏览器距离屏幕顶部及左侧的距离，会随浏览器的移动而改变

3. 盒子和 document 的宽高

盒子的宽高主要分为，client、offset、scroll。

其中除了 offsetParent，其他都是数字
只有 scrollTop 和 scrollLeft 是可以修改的

分清楚：

  • document.documentElement => html
  • document.body => body
  • document.documentElement.childNodes[2] => document.body

document 包含 document.documentElement
document.documentElement 包含 document.body

浏览器兼容性，都需要两个同时使用

  1. document.documentElement  ||  document.body

3.1 有关 client 的宽高（解析一致）

（1）clientWidth、clientHeight
是指元素可见区域的宽高。即 padding + content（width/height）

clientWidth：盒子宽度 + 左右 padding
clientHeight：盒子高度 + 上下 padding

  1. 无滚动条
  1. clientWidth / Height = 设定的宽高 + padding*2（左右或者上下）
  1. 有滚动条、且滚动条显示（Mac系统下滚动条不显示）
  1. clientWidth / Height = 设定的宽高 + padding*2 - 滚动条宽度

（2）clientTop、clientLeft
用于读取 border 的宽度

  • clientLeft：盒子左边框的宽度
  • clientTop：盒子上边框的宽度

结合 client 和 offset 我们可以求出元素的右边框和下边框的宽度：

  1. //=> 左边框
  2. clientRight = Div.offsetWidth - Div.clientWidth - Div.clientLeft
  4. //=> 下边框
  5. clientBottom = Div.offsetHeight - Div.clientHeight - Div.clientTop

3.2 有关 offset 的宽高

（1）offsetWidth、offsetHeight
是指元素自身的宽高。即 padding + content（width/height）+ border

  1. 无滚动条
  1. offsetWidth/Height = 设定的宽高 + padding*2（左右或者上下）+ border*2
  2. offsetWidth/Height = clientWidth/Height + border*2
  1. 有滚动条、且滚动条显示（Mac 系统下滚动条不显示）
  1. //=> 实际上就是 client 减少滚动条宽高，offset 不变
  2. offsetWidth/Height = 设定的宽高 + padding*2  + border*2
  3. offsetWidth/Height = clientWidth/Height + 滚动条宽度 + border*2

兼容问题：获取整个页面的宽高

  1. var w= document.documentElement.offsetWidth
  2.     || document.body.offsetWidth;
  3. var h= document.documentElement.offsetHeight
  4.     || document.body.offsetHeight;

（2）offsetTop、offsetLeft
offsetLeft：元素的外边框距离 offsetParent 元素的内边框的 left 值
offsetTop：元素的外边框距离 offsetParent 元素的内边框的 top 值

offsetParent 是一个元素对象

  • 如果当前元素的祖先元素没有进行定位，则 offsetParent 为 body
  • 如果有定位，offsetParent 取最近的设置定位的祖先元素，从最近的父节点开始，一层层向上找，直到 body。
  • 在 table 便签中，需要注意特殊情况
    • td 的 offsetParent 是 table
    • td 里面的标签的 offsetParent 是这个 td（里面的标签没有设置定位时）

IE 6/7

  1. offsetLeft = ( offsetParent 的 padding - left ) + ( 当前元素的 margin-left )

IE 8/9 及Chrome

  1. offsetLeft = ( offsetParent 的 margin-left ) + ( offsetParent 的 border-left-width ) + ( offsetParent 的 padding-left )+ ( 当前元素的 margin-left )

Firefox

  1. offsetLeft = ( offsetParent 的 margin-left ) + ( offsetParent 的 padding-left )+ ( 当前元素的 margin-left )

3.3 有关 scroll 的宽高

（1）scrollWidth、scrollHeight
scrollHeight：获取对象的滚动高度
scrollWidth：获取对象的滚动宽度

  1. 无溢出
  1. scrollWidth/Height = clientWidth/Height
  1. 有溢出
  1. //=> 没有设置 overflow
  2. scrollWidth/Height = 实际内容宽高 + 上或左 padding
  4. //=> 设置了 overflow
  5. scrollWidth/Height = 实际内容宽高 + 上下或左右 padding

即 scrollWidth/Height >= clientWidth/Height

兼容问题：获取整个网页的全文宽高

  1. var w=document.documentElement.scrollWidth || document.body.scrollWidth;
  2. var h=document.documentElement.scrollHeight || document.body.scrollHeight;

（2）scrollTop、scrollLeft
scrollTop：被卷去的高度，就是手动往下滚动的距离
scrollLeft：被卷曲的宽度，就是手动往右滚动的距离
即滚动条距离顶部或者左侧的距离

event.clientX + document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
document.documentElement.scrollTop 垂直方向滚动的值

要获取当前页面的滚动条纵坐标位置，用：

  1. document.documentElement.scrollTop;

而不是：

  1. document.body.scrollTop;

4. 实战

获取可视区域的宽高

  1. var w= document.documentElement.clientWidth || document.body.clientWidth;
  3. var h= document.documentElement.clientHeight|| document.body.clientHeight;

原因：
有 <!DOCTYPE html> 这个文档声明的时候，document.documentElement 是准确的
没有 <!DOCTYPE html> 时：document.body 是准确的

监听可视窗口的变化

利用 window 或者 document.body 的 onresize 事件

  1. window.onresize = function () {
  2.   console.log(document.documentELement.clientWidth || document.body.clientWidth);
  3. }
  4. documnet.body.onresize = function () {
  5.   console.log(document.documentELement.clientWidth || document.body.clientWidth);
  6. }

获取整个文档的高度

  1. document.documentElement.scrollHeight || document.body.scrollHeight;

获取某个元素距离 body 的距离

页面结构：

  1. <div id="div1">珠峰培训</div>
  2. <div id="outer">
  3.   outer
  4.   <div id="center">center
  5.     <div id="inner">inner</div>
  6.   </div>
  7. </div>

思路：

  • 利用 offsetLeft 获取某个元素外边框与上一级参照内边框的距离
  • 利用 clientLeft 获取上一级参照的边框宽度
  • 利用 offsetParent 获取上一级参照，直到 body
  1. function offset(ele) {
  2.   var left = ele.offsetLeft;
  3.   var parent = ele.offsetParent;
  4.   while (parent && parent !== document.body) {
  5.     left += (parent.clientLeft + parent.offsetLeft);
  6.     parent = parent.offsetParent;
  7.   }
  8.   return left;
  9. }

优化：获取上边和左边的距离

  1. function offset(ele) {
  2.   var left = ele.offsetLeft;
  3.   var top = ele.offsetTop;
  4.   var parent = ele.offsetParent;
  5.   while (parent && parent !== document.body) {
  6.     left += (parent.clientLeft + parent.offsetLeft);
  7.     top += (parent.clientTop + parent.offsetTop);
  8.     parent = parent.offsetParent;
  9.   }   
  10.   return {
  11.     left,
  12.     top
  13.   };
  14. }

获取元素可滚动的高度

获取元素整个高度，减去当前元素的可视区高度，就得到其可滚动的高度

var max = box.scrollTop - box.clientHeight;