详解JS动态获取浏览器或页面容器的宽高

JS获取容器宽高常用属性汇总

首先介绍JavaScript动态获取浏览器或页面等容器宽高的主要方法。

网页可见区域宽度：document.body.clientWidth 网页可见区域高度：document.body.clientHeight 网页可见区域宽度（含边线）：document.body.offsetWidth 网页可见区域高度（含边线）：document.body.offsetHeight 网页正文全文宽度：document.body.scrollWidth 网页正文全文高度：document.body.scrollHeight 网页被卷去的高度：document.body.scrollTop 网页被卷去的左侧距离：document.body.scrollLeft 网页正文部分上边距：window.screenTop 网页正文部分左边距：window.screenLeft 屏幕分辨率高度：window.screen.height 屏幕分辨率宽度：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

动态高度设置实例分析

接下来结合具体实例进行说明。

有时在CSS中设置了100%高度，但由于当前页面是子页面，这100%仅指父页面的高度。如果子页面包含下拉滚动条且有较多内容，部分元素可能无法被正确获取或显示。

如下图所示：

我们将id为“bg”的div高度设置为100%，但当内容向下滚动时，会发现该背景高度仅对应父页面的100%，子容器内的内容并未被黑色背景完全覆盖。

因此，在这种情况下，我们需要为“bg”元素设置动态高度。

在JavaScript的初始化方法中编写如下代码：

//定义id为bg的高度随内容而变化
  var winHeight=0;
  winHeight=document.body.scrollHeight;
  document.getElementById("bg").style.height=winHeight+"px";
  
}

再次查看效果：

这样，整个页面即可被完整渲染。

以上介绍了JS动态获取浏览器或页面等容器宽高的详细整合内容，希望对大家有所帮助。如有任何疑问，请留言，小编会及时回复。感谢大家对本站的支持！