JavaScript 获取窗口大小

提问人：刘团圆发布时间：2020-11-27

■知识点

获取<html>标签的clientWidth和clientHeight属性，就可以知道浏览器窗口的可视宽度和高度，而<html>标签在脚本中表示为document.documentElement，可以这样设计：

var w = document.documentElement.clientWidth; //返回值不包含滚动条的宽度

var h = document.documentElement.clientHeight; //返回值不包含滚动条的宽度

在怪异模式下，body是最顶层的可视元素，而html元素保持隐藏。所以只有通过<body>标签的clientWidth和clientHeight属性才可以知道浏览器窗口的可视宽度和高度，而<body>标签在脚本中表示

为document.body，可以这样设计：

var w = document.body.clientWidth;

var h = document.body.clientHeight;

把上面两种方法兼容起来，则设计代码如下:

var w = document.documentElement.clientWidth || document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;

如果浏览器支持documentElement，则使用documentElement对象读取，如果该对象不存在，则使用body对象读取。

如果窗口包含内容超出了窗口可视区域，则应该使用scrollWidtli和scrollHeight属性来获取窗口的

实际宽度和高度。

■实例设计

对于document.documentElement和document.body来说，不同浏览器对它们的支持略有差异。

</div>

</body>

var wb = document.body.scrollWidth;

var hb = document.body.scrollHeight;

var wh = document.documentElement.scrollWidth;

var hh = document.documentElement.scrollHeight;

</script>

不同浏览器使用documentElement对象获取浏览器窗口的实际尺寸是一致的，但是使用body对象来获取对应尺寸时就会存在解析差异，在实际设计中应该考虑这个问题。

相关视频回答

点击加载更多评论>>