原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解

**

原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解

**

1.首先对 window对象 、 document对象做一个区别;

• window ：窗口（整个浏览器窗口），包含document;
• document ：整个HTML文档；

2.与 window 相关的宽、高：

• window.innerWidth：整个浏览器窗口的宽度；
• window.innerHeight：document起始（只是起始）到浏览器窗口底部的高度；
• window.outerWidth：整个浏览器窗口的宽度；
• window.outerHeight：整个浏览器窗口的高度；

3.与 window.screen 相关的宽、高：

• window.screen.height：用户屏幕的高度；
• window.screen.width：用户屏幕的宽度；
• window.screen.availHeight：可利用的屏幕高度，与window.screen.height一样;
• window.screen.availWidth：可利用的屏幕宽度，与window.screen.width一样；
• window.screenTop：浏览器窗口到用户屏幕最上方的距离；
• window.screenLeft：浏览器窗口到用户屏幕最左边的距离；

4.与 client、offset、scroll 相关的宽、高：

• 与 client相关的宽高（ 以body为例 ）

  document.body.clientHeight：可视部分的高度，即padding + content；

  document.body.clientWidth：可视部分的宽度，即padding + content；

  注意：其他元素也有 clientWidth 和 clientHeight，不仅仅是body；
  无padding、无滚动条时：
  clientWidth == style.width；
  有padding、无滚动条时：
  clientWidth == style.width + style.padding；
  有padding、有滚动时：
  clientWidth == style.width + style.padding - 滚动条的宽度；
  clientHeight类似

  document.body.clientLeft：元素的 border-left 的大小，无border时，clientLeft === 0;

  document.body.clientTop：元素的 border-top 的大小，无border时，clientLeft === 0;

• 与offset 相关的宽高（ 以body为例 ）

  document.body.offsetHeight：元素的 border + padding + content 的值（跟元素溢出无关） ；

  document.body.offsetWidth：元素的 border + padding + content 的值（跟元素溢出无关） ；

  注意：任何元素都有 offsetWidth 和 offsetHeight，不仅仅是body；

  无padding、无滚动条、无border时：
  offsetWidth == style.width == clientWidth；

  有padding、无滚动条、有border时：
  offsetWidth == style.width + style.padding + style.border；

  有padding、有滚动、有border时：
  offsetWidth == style.width + style.padding + （style.border - 滚动轴的宽度） ；
  offsetHeight类似

  而offsetTop、offsetLeft就必须注意浏览器的兼容性问题啦.
  IE6、IE7（不过这些浏览器版本都比较老，早晚会被淘汰）
  offsetLeft == ( offsetParent 的 padding-left) + ( 当前元素的 margin-left )
  offsetTop == ( offsetParent 的 padding-top) + ( 当前元素的 margin-top)

  IE8/9/10、chrome浏览器
  offsetLeft == ( offsetParent 的 padding-left ) + ( offsetParent 的 border-left ) + ( offsetParent 的 margin-left ) + ( 当前元素的 margin-left )

  offsetTop == ( offsetParent 的 padding-top ) + ( offsetParent 的 border-top ) + ( offsetParent 的 margin-top ) + ( 当前元素的 margin-top)

  fireFox浏览器（ 不需要 border ）
  offsetLeft == ( offsetParent 的 padding-left ) + ( offsetParent 的 margin-left ) + ( 当前元素的 margin-left )

  offsetTop == ( offsetParent 的 padding-top ) + ( offsetParent 的 margin-top ) + ( 当前元素的 margin-top)

• 与scroll相关的宽、高（ 用的比较多 ）

  scrollHeight：滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）；
  scrollWidth：一般就是浏览器窗口的宽度；
  scrollTop( 属性可读写 )：当元素中的内容溢出的时候，该元素被卷起来的宽度；
  scrollLeft( 属性可读写 )：当元素中的内容溢出的时候，该元素被卷起来的高度；

  在div中的 scrollWidth 和 scrollHeight
  无滚动轴时：
  scrollWidth == clientWidth == style.width + padding；

  有滚动轴时：
  scrollWidth == 实际内容的宽度 + padding；
  scrollHeight == 实际内容的高度+ padding；

注：
浏览器的窗口是可以伸缩变换的，所以看到不同的值也很正常；

如遇错误，请加以指正

• 结束语…………………………福利时间到………………………………

  大家同为程序员，在这里给大家真诚的送上福利。

  福利链接点击这里！