JS获取屏幕宽高属性总结

2020-11-26 本文已影响0人程序员张晴天

平时在写界面获取屏幕、浏览器宽高时，经常会搞不清楚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：整个浏览器窗口的高度

window-屏幕宽高.png

document相关宽高属性

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;
    }

client-offset-scroll.png

client-height.png

screen相关宽高属性

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

screen.png

如果对你有帮助的话，点赞、评论、赞赏都是对我的鼓励，也是支持我写下去的动力，笔芯~

本文原创发布于微信公众号「程序员张晴天」，欢迎关注第一时间获取最新分享，一起进步。

程序员张晴天.png