如何使用js动态获取浏览器或页面等容器的宽高-创新互联

这篇文章给大家分享的是有关如何使用js动态获取浏览器或页面等容器的宽高的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些：

网页可见区域宽： 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

 接着我们结合实例来实际说明一下：

有时候我们写了100%高度的时候，然后因为是当前页面的子页面，100%的只是父页面，而子页面有下拉条还有内容的话，一些东西就不能都获取到。

如下图：

（我们设置了这个div id为“bg”的高度为100%，但下拉条内容拉下去的时候，还是会发现这个背景高度只是父页面的100%，里面子容器的内容都没有被这个黑色背景覆盖到。）

所以在这种时候我们就要开始考虑给这个“bg”设置对应的动态高度。

在js中的初始化方法里写如下代码：

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

然后我们再来看效果：

 好了，这样整个页面都可以被渲染到了。

JavaScript的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

感谢各位的阅读！关于“如何使用js动态获取浏览器或页面等容器的宽高”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。