平时在写界面获取屏幕、浏览器宽高时，常常会搞不清楚window、body、screen中的clientWidth、offsetWidth、width的区别，明天做一个总结帮忙本人了解。

window、document、screen、body、documentElement的关系

window是浏览器中JavaScript的顶层对象，所有全局变量与函数都是window对象的成员，而document也是window的对象，示意以后的浏览器载入的网页（DOM树）。比方像window.alert() = alert()、window.document.body.clientWidth=document.body.clientWidth。

screen也是window的对象，示意以后浏览器所在的屏幕。

documentElement和body，前者是指文档的html元素对象，后者指文档的body对象

window相干宽高属性

  • innerWidth：浏览器窗口外部宽度（蕴含垂直滚动条）
  • innerHeight：浏览器窗口外部高度（蕴含程度滚动条）
  • outerWidth：整个浏览器窗口的宽度
  • outerHeight：整个浏览器窗口的高度

document相干宽高属性

相干的有3类属性：

  • client相干
  • offset相干
  • scroll相干

client相干属性

  • document.body.clientWidth：body的宽度（padding + content，不蕴含滚动条）
  • document.body.clientHeight: body的高度

offset相干属性

  • document.body.offsetWidth：body蕴含border的宽度（padding + content + border）
  • document.body.offsetHeight：body蕴含border的高度

scroll相干属性

  • document.body.scrollWidth：body可滚动的宽度，包含overflow溢出看不到的内容
  • document.body.scrollHeight：body可滚动的高度，包含overflow溢出看不到的内容

documentElement与应用body相似，将以上body改为documentElement，测量宽高的元素就是html了。

看个例子，设置了reset.css后，设置以后页面的css

    body {        font-family: "sans-serif";        height: 800px;        border: 40px solid orange !important;    }

screen相干宽高属

  • screen.width：屏幕宽度，浏览器最大化时的最大宽度
  • screen.height：屏幕高度，浏览器最大化时的最大高度
  • screen.availWidth：浏览器可应用的屏幕最大程度宽度
  • screen.availHeight：浏览器可应用的屏幕最大的垂直高度

如果对你有帮忙的话，点赞、评论、赞叹都是对我的激励，也是反对我写下去的能源，笔芯~

本文原创公布于微信公众号「程序员张晴天」，欢送关注第一工夫获取最新分享，一起提高。

参考文章：

  • JavaScript中的各种宽高属性