欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS获取屏幕宽高属性总结

程序员文章站 2022-05-23 16:25:26
...

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

JS获取屏幕宽高属性总结

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

JS获取屏幕宽高属性总结

JS获取屏幕宽高属性总结

screen相关宽高属性

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

JS获取屏幕宽高属性总结

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

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

JS获取屏幕宽高属性总结